I
I
Ivan Gordienko2019-05-30 09:27:14
Bootstrap
Ivan Gordienko, 2019-05-30 09:27:14

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="">
            &#8195Площадь:</span> <?php the_field('scale'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/perimeter.png" alt="">
      &#8195Габариты
      дома:</span> <?php the_field('scale_house'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/perimeter.png" alt="">
      &#8195Габариты застройки:</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="">
      &#8195Количество
            этажей:</span> <?php the_field('stair'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/number-rooms.png" alt="">
      &#8195Количество
            спален:</span> <?php the_field('rooms') ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/unitaz.png" alt="">
            &#8195Количество с/у:</span> <?php the_field('toilet'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/roof-insulation.png" alt="">
      &#8195Утепление
            кровли:</span> <?php the_field('roof'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/facade-insulation.png" alt="">
      &#8195Утепление
            внешних стен:</span> <?php the_field('walls'); ?>
            </li>
            <li class="block__info_element"><span><img src="<?php bloginfo('template_directory'); ?>/img/project/floor-insulation.png" alt="">
      &#8195Утепление
            пола:</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

2 answer(s)
I
Ivan Gordienko, 2019-05-30
@zordq

Thanks to Eugene Chefranov , found a solution.
Assigning to the id-slider id-post through -
post-<?php the_ID(); ?>

E
Evgeny, 2019-05-30
@iamd503

You have the same id for all sliders, that's why this happens

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question