Answer the question
In order to leave comments, you need to log in
How to use multiple Bootstrap sliders in Wordpress loop?
Good afternoon. There is a page with the output of posts, each of which has a slider.
Bootstrap slider is used (thought of https://idangero.us/swiper), but this one is generally fine.
The problem is that for each next slider, its controls control the very first slider. The problem lies with the "target" for the control. How to make it so that when displaying posts, for each, your own slider works independently of the other, that is, logically, the id for the slider changes, as well as the targets for the controls change?
<?php
if ( $query->have_posts() )
{
?>
<br />
Найдено <?php echo $query->found_posts; ?> результатов<br />
Страница <?php echo $query->query['paged']; ?> из <?php echo $query->max_num_pages; ?><br />
<div class="pagination">
<div class="nav-previous"><?php next_posts_link( '', $query->max_num_pages ); ?></div>
<div class="nav-next"><?php previous_posts_link( '' ); ?></div>
<?php
if (function_exists('wp_pagenavi'))
{
echo "<br />";
wp_pagenavi( array( 'query' => $query ) );
}
?>
</div>
<div class="rowlist">
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<div class="row">
<div class="block__project col-md-8">
<span class="block__project_title">
<i class="fas fa-bookmark">
</i>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</span>
<div id="carouselExampleIndicators" class="carousel slide" data-interval="false" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="<?php the_field('background'); ?>" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php the_field('background_2'); ?>" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="<?php the_field('background_3'); ?>" alt="Third slide">
</div>
</div>
</div>
</div>
<div class="block__info col-md-4">
<ul class="block__info_elements">
<li class="block__info_element">
Цена проекта
<span>
<?php the_field("price") ?>
</span>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/area.png" alt="">
 Площадь:</span> <?php the_field('scale'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/perimeter.png" alt="">
 Габариты
дома:</span> <?php the_field('scale_house'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/perimeter.png" alt="">
 Габариты застройки:</span>
<?php the_field('long_house'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/number-floors.png" alt="">
 Количество
этажей:</span> <?php the_field('stair'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/number-rooms.png" alt="">
 Количество
спален:</span> <?php the_field('rooms') ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/unitaz.png" alt="">
 Количество с/у:</span> <?php the_field('toilet'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/roof-insulation.png" alt="">
 Утепление
кровли:</span> <?php the_field('roof'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/facade-insulation.png" alt="">
 Утепление
внешних стен:</span> <?php the_field('walls'); ?>
</li>
<li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/floor-insulation.png" alt="">
 Утепление
пола:</span> <?php the_field('downstairs'); ?>
</li>
<li class="block__info_element">
<div class="gallery__block_second container-fluid">
<div class="gallery__items row">
<div class="col-sm-6 col-md-4 col-lg-6 photodop item">
<a href="<?php the_field('pic'); ?>" data-lightbox="photos">
<img class="m-auto img-fluid" src="<?php the_field('pic'); ?>">
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-6 photodop item">
<a href="<?php the_field('pic_s'); ?>" data-lightbox="photos">
<img class="m-auto img-fluid" src="<?php the_field('pic_s'); ?>">
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<?php } ?>
</div>
Страница <?php echo $query->query['paged']; ?> из <?php echo $query->max_num_pages; ?><br />
<div class="pagination">
<div class="nav-previous"><?php next_posts_link( '', $query->max_num_pages ); ?></div>
<div class="nav-next"><?php previous_posts_link( '' ); ?></div>
<?php
if (function_exists('wp_pagenavi'))
{
echo "<br />";
wp_pagenavi( array( 'query' => $query ) );
}
?>
</div>
<?php
}
else
{
echo "</br> Результатов не найдено :(";
}
?>
</div>
Answer the question
In order to leave comments, you need to log in
Thanks to Eugene Chefranov , found a solution.
Assigning to the id-slider id-post through -post-
the_ID();
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question