Блог

я расширяю плагин bootstrap carousel, чтобы позволить мне использовать изображения в качестве навигаторов миниатюр. Я сделал это, но проблема в том, как отобразить активный список (миниатюру)

css:

 .carousel-wrap {
      overflow: hidden;
      margin: 0 auto;
      width: 408px;    
}
.carousel-indicators {
    position: relative;
    bottom: 0;
    width: 1000em
}
  

HTML:

 <div id="slider1" class="carousel-wrap">
                 <ol class="carousel-indicators carousel-gallery">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="http://placehold.it/80x60amp;amp;text=one" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1" class=""><img src="http://placehold.it/80x60amp;amp;text=two" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60amp;amp;text=three" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60amp;amp;text=four" class="img-responsive"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2" class=""><img src="http://placehold.it/80x60amp;amp;text=five" class="img-responsive"></li>
                 </ol>
             </div>
  

Это должно сработать:

 $('#slider1 li').on('click', function(){
// remove class 'active' from all li
$("#slider1 li").removeClass("active");
// add class 'active' to the clicked li
$(this).toggleClass('active');
})
  

Поместите этот JavaScript перед слайдером-HTML и оформите элементы списка с помощью css в зависимости от класса .active.