Показать сообщение отдельно
  #1 (permalink)  
Старый 03.10.2017, 11:20
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Как сделать прокрутку индикаторов в карусели?
Здравствуйте!
Делаю карусель на 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>
Ответить с цитированием