Bootstrap 3 carousel navigator активный класс не обновляется

Question

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

Вот мой код:

<div id="homepanel" class="carousel slide" data-ride="carousel" data-interval="5000"> 
 
    <!-- Indicators --> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <ol class="home-tabs"> 
 
     <li>Featured Products</li> 
 
     <li data-target="#homepanel" data-slide-to="0" class="active"><a href="#">Slide 1</a></li> 
 
     <li data-target="#homepanel" data-slide-to="1"><a href="#">Slide 2</a></li> 
 

 
     </ol> 
 
    </div> 
 

 
    <div class="col-sm-8"> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner"> 
 
     <div class="item active"> 
 
      <div class="row"> 
 
      <div class="col-sm-6"> 
 
       <img alt="Cardboard Boxes" src="/slide1.png" class="no-border-radius"> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <div class="content"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, sint.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="row"> 
 
      <div class="col-sm-6"> 
 
       <img alt="Multi-wall Sacks" src="/slide2.jpg" class="no-border-radius"> 
 
      </div> 
 
      <div class="col-sm-6"> 
 
       <div class="content"> 
 
       <p>Molestiae incidunt excepturi dolorum autem eum illum ipsa facilis sed.</p> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

li.active не меняется. Что-то не хватает в моем коде? Есть идеи?

Я прилагаю jsfiddle ссылка здесь: http://jsfiddle.net/wpyz4c22/

Answer 1

Carousel нужна экстра-класса по показателям изменить литиево-активное состояние. Вы где не хватает этого класса: .carousel-indicators

Найти JSFiddle здесь: http://jsfiddle.net/Bladepianist/tzrnjdkk/

<div id="homepanel" class="carousel slide" data-ride="carousel" data-interval="5000"> 
    <!-- Indicators --> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <ol class="home-tabs carousel-indicators"> 

     <li data-target="#homepanel" data-slide-to="0" class="active"><a href="#">Slide 1</a></li> 
     <li data-target="#homepanel" data-slide-to="1"><a href="#">Slide 2</a></li> 

     </ol> 
    </div> 

    <div class="col-sm-8"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="row"> 
      <div class="col-sm-6"> 
       <img alt="Cardboard Boxes" src="http://placehold.it/310x200" class="no-border-radius"> 
      </div> 
      <div class="col-sm-6"> 

      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="row"> 
      <div class="col-sm-6"> 
       <img alt="Multi-wall Sacks" src="http://placehold.it/310x200" class="no-border-radius"> 
      </div> 
      <div class="col-sm-6"> 


      </div> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div>