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