Вывод изображений в слайдер на 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, а не во всех.
Вопрос: Как реализовать чтобы корректно отображался слайдер?
Заметки к вопросу:
Решено: