Как использовать несколько слайдеров Bootstrap в цикле Wordpress?

Question

[Иван Гордиенко]

Добрый день. Имеется страница с выводом постов, у каждого из которых есть слайдер.

Используется слайдер Bootstrap (думал о https://idangero.us/swiper), но этот, в целом устраивает.
Проблема такая, что для каждого следующего слайдера, элементы управления им, контролируют самый первый слайдер. Проблема заключается в "цели" для элемента управления. Как сделать так, чтобы при выводе постов, для каждого, свой слайдер работал независимо от другого, то есть по логике, менялись id для слайдера, а так же у элементов управления менялись таргеты?

<?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 1

[Иван Гордиенко]

Благодаря Eugene Chefranov, найдено решение.

Присваивая к id-слайдера id-поста через -

post-<?php the_ID(); ?>

Answer 2

[Евгений]

Id у вас одинаковые у всех слайдеров, поэтому такое происходит

Comments

[Иван Гордиенко]

Я это понимаю, вопрос и состоит в том, как это исправить?

[Eugene Chefranov]

coresak, так дописывайте к ID слайдера ID поста

[Иван Гордиенко]

Eugene Chefranov, сработало через

post-<?php the_ID(); ?>

Спасибо большое!