Вывод изображений в слайдер на bootstrap 4 через get_posts()

Код в чистом html который корректно отрабатывает:

<div class="col-sm col-xs-2 col-md-4 col-lg-4 col-xl otstup">
				<h5 class="featurette-heading" align="center">Шестерни,<br>звездочки</h5>
		<div id="carouselExampleIndicators1" class="carousel slide carousel-fade" data-ride="carousel">
	  <div class="carousel-inner active" style="border-radius: 5px;">
		<div class="carousel-item active">
		  <img class="d-block w-100" src="img/products/1/1.jpg" alt="First slide">
		   <div class="text-carousel textMonsterratshadow">       
		 <a href="kaprolon.html"><font color="white"><h7>Дозирующий шнек</h7></font></a>
	  </div>
		</div>
		<div class="carousel-item">
		  <img class="d-block w-100" src="img/products/1/2.jpg" alt="Second slide">
			<div class="text-carousel textMonsterratshadow">
		<a href="kaprolon.html"><font color="white"><h7>Успкоитель цепи</h7></font></a>
	  </div>
		</div>
		<div class="carousel-item">
		  <img class="d-block w-100" src="img/products/1/3.jpg" alt="Second slide">
			<div class="text-carousel textMonsterratshadow">
		<a href="kaprolon.html"><font color="white"><h7>Дозатор сеялки</h7></font></a>
	  </div>
		</div>
		<div class="carousel-item">
		  <img class="d-block w-100" src="img/products/1/4.jpg" alt="Second slide">
			<div class="text-carousel textMonsterratshadow">
		<a href="kaprolon.html"><font color="white"><h7>Запчасти доильных аппаратов</h7></font></a>
	  </div>
		</div>
	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
	</div>

Это один блок добавляя еще 4 таких блока будет такой результат(5 слайдеров которые автоматически перелистывают фото каждого блока):

Так как фото добавляются в запись я решил выводить фото из записей таким образом:

<div class="col-sm col-xs-2 col-md-4 col-lg-4 col-xl otstup">
				<h5 class="featurette-heading" align="center">Шестерни,<br>звездочки</h5>
		<div id="carouselExampleIndicators1" class="carousel slide carousel-fade" data-ride="carousel">
	  <div class="carousel-inner" style="border-radius: 5px;">

	   <?php
			 // параметры по умолчанию
			$posts = get_posts( array(
				'numberposts' => 0,
				'category_name'    => shesterni,
				'orderby'     => 'date',
				'order'       => 'DESC',
				'include'     => array(),
				'exclude'     => array(),
				'meta_key'    => '',
				'meta_value'  =>'',
				'post_type'   => 'post',
				'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
			) );

			foreach( $posts as $post ){ setup_postdata($post);
				?>

		<div class="carousel-item active">
		 <?php $img1 = the_post_thumbnail();
					if( !empty( $img1 ) ): ?>
				   <img class="d-block w-100" src="<?php echo $img1['url'];?>" alt="First slide"> 
				  <?php endif; ?>
		   <div class="text-carousel textMonsterratshadow">       
		 <a href="kaprolon.html"><font color="white"><h7><?php the_title();?></h7></font></a>
	  </div>
		</div>

		<?php
			}

			wp_reset_postdata(); // сброс 
				?> 

	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	</div>
	</div>

но результат получился таким:

Проблема из-за класса "active" который должен стоять только в первом div, а не во всех.

Вопрос: Как реализовать чтобы корректно отображался слайдер?

Заметки к вопросу:
andrey-panov 4.1 год назад

Решено:

<div class="col-sm col-xs-2 col-md-4 col-lg-4 col-xl otstup">
				<h5 class="featurette-heading" align="center">Шестерни,<br>звездочки</h5>
		<div id="carouselExampleIndicators1" class="carousel slide carousel-fade" data-ride="carousel">
		<?php $args = array(
				'numberposts' => 0,
				'category_name'    => shesterni,
				'orderby'     => 'date',
				'order'       => 'DESC',
				'include'     => array(),
				'exclude'     => array(),
				'meta_key'    => '',
				'meta_value'  =>'',
				'post_type'   => 'post',
				'suppress_filters' => true, // подавление работы фильтров изменения SQL запроса
			 );
			 $slider = new WP_Query($args);
			 if($slider->have_posts()):
			 $count = $slider->found_posts;
			 ?>
	  <div class="carousel-inner" style="border-radius: 5px;">
	   <?php $i = 0; while($slider->have_posts()): $slider->the_post(); ?>
		<div class="carousel-item <?php echo ($i == 0) ? 'active' : ''?>">
				  <?php the_post_thumbnail( 'slider', array(
												 'class' => 'd-block w-100',
												 'alt' => get_the_title() ) ) ; ?>
		   <div class="text-carousel textMonsterratshadow">       
		 <a href="kaprolon.html"><font color="white"><h7><?php the_title();?></h7></font></a>
	  </div>
		</div>
		<?php $i++; endwhile; ?>
	  </div>
	  <a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	  </a>
	  <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	  </a>
	  <?php endif;  wp_reset_postdata(); ?>
	</div>
	</div>