Its very difficult to understand from the HTML code example what you are trying to achieve but going by the php you could do the following.
<?php
$posts = new WP_Query([
'post_type' => 'services',
'posts_per_page' => -1,
'order' => 'ASC'
]);
if ($posts->have_posts()) :
?>
<ul class="slider-container">
<?php
$loop_position = 1;
while ($posts->have_posts()) {
$posts->the_post();
// if loop position is greater than our threshold (8) reset to initial position (1)
if ($loop_position > 8) $loop_position = 1;
// if we are in the first loop (loop position 1) itiration create the slide open tag
if ($loop_position === 1) echo '<li class="single-slide">';
// if we are in the first/fifth loop (loop position 1/5) itiration create the row open tag
if (in_array($loop_position, [1,5])) echo '<div class="row">';
// here we can simply output each loop itiration html as we need
echo '<div class="col-md-3">';
echo '<div class="box-desc">';
echo "<h4>Some title {$loop_position}</h4>";
echo '</div>';
echo '</div>';
// if we reached the end of the loop (no more post) we need to close all the tags
// starting from row than single-slide
if ($posts->found_posts == $loop_position) {
echo '</div></li>';
// to prevent the rest of the code from executing we exit out of the loop, using break
break;
}
// if we are in the fourth/eighth loop (loop position 4/8) itiration create the row closing tag
if (in_array($loop_position, [4,8])) echo '</div>';
// if we are in the last loop (loop position 8) itiration create the slide closing tag
if ($loop_position === 8) echo '</li>';
// increate loop position by 1
$loop_position++;
}
?>
</ul>
<?php
endif;
wp_reset_postdata();
?>
The HTML output would be the following
<ul class="slider-container">
<li class="single-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 1</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 2</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 3</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 4</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 5</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 6</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 7</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 8</h4>
</div>
</div>
</div>
</li>
<li class="single-slide">
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 1</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 2</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 3</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 4</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 5</h4>
</div>
</div>
<div class="col-md-3">
<div class="box-desc">
<h4>Some title 6</h4>
</div>
</div>
</div>
</li>
</ul>
As we decided every eight (8) posts receive their own slick slide, in every slick slide, every four (4) posts are wrapped with a <div class="row">...</div>
tag.
I personally think that this is a bit of overkill and over complication, you could achieve the same result without using bootstrap for layout and instead use css grid
.
If you would like I could edit my answer to include the non bootstrap layout