Здравствуйте!
Делаю карусель на Bootstrap. Индикаторы выведены как миниатюры внизу в ряд...
Стоит задача, что бы активный индикатор всегда был вторым по счету - т.е. при нажатии на индикатор, они прокручивались так что бы активный индикатор стал вторым (ну и соответственно индикаторы должны быть зациклены) .
Есть ли решение?
<div id="carousel-custom" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$arg = array(
'post_status' => 'publish',
'post_type' => 'tabslider',
'category-slide' => 'logos',
'posts_per_page' => -1
);
$slides = new WP_Query( $arg );
if ( $slides -> have_posts() ) :
$i = 0;
while ( $slides -> have_posts() ) : $slides -> the_post();
$task_1 = get_field('task_1');
$task_2 = get_field('task_2');
$task_3 = get_field('task_3');
$zagolovok = get_the_title();
$cont = get_the_content();
//print_r( $image_list );
?>
<div class="item <? if ($i==0) { echo 'active'; } ?>">
<h3> <?php echo $zagolovok; ?> </h3>
<div class="col-sm-9 flright">
<ul>
<li><?php echo $task_1; ?></li>
<li><?php echo $task_2; ?></li>
<li><?php echo $task_3; ?></li>
</ul>
<?php echo $cont; ?>
</div>
</div>
<?php $i = $i + 1; endwhile; wp_reset_postdata(); endif; ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-custom" role="button" data-slide="prev">
<i class="fa fa-chevron-left"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-custom" role="button" data-slide="next">
<i class="fa fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
<!-- Indicators -->
<ol class="carousel-indicators visible-sm-block hidden-xs-block visible-md-block visible-lg-block">
<?php
$arg = array(
'post_status' => 'publish',
'post_type' => 'tabslider',
'category-slide' => 'logos',
'posts_per_page' => -1
);
$slides = new WP_Query( $arg );
if ( $slides -> have_posts() ) :
$i = 0;
while ( $slides -> have_posts() ) : $slides -> the_post();
$image_list = get_field('tab_logo');
//print_r( $image_list );
?>
<li data-target="#carousel-custom" data-slide-to="<? echo $i; ?>" class="<? if ($i==1) { echo 'active'; } ?>">
<img src="<?php echo $image_list; ?>" alt="..." class="img-responsive">
</li>
<?php $i = $i + 1; endwhile; wp_reset_postdata(); endif; ?>
</ol>
</div>