带标签的传送带：当传送带滑向下一张或上一张幻灯片时调整活动标签

Question

我有一个Twitter Bootstrap 3传送带，没有指示器按钮。 而不是那些指标按钮，我使用标签（我在CSS中相应的样式）。 这样，用户有一个想法是什么每张幻灯片（基于选项卡的标签上），所以它更容易让他去他感兴趣的幻灯片

的HTML看起来像这样：

<div class="carousel slide" data-ride="carousel" id="whatIsCarousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="slide0.png"> 
     </div> 
     <div class="item"> 
      <img src="slide1.png"> 
     </div> 
     ... 
    </div> 
    <a class="left carousel-control" data-slide="prev" href="#whatIsCarousel"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" data-slide="next" href="#whatIsCarousel"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 
<ul class="nav nav-justified" id="whatIsCarouselButtons"> 
    <li class="active" data-target="#whatIsCarousel" data-slide-to="0"> 
     <a data-toggle="tab" href="#">Slide 0</a> 
    </li> 
    <li data-target="#whatIsCarousel" data-slide-to="1"> 
     <a data-toggle="tab" href="#">Slide 1</a> 
    </li> 
    ... 
</ul> 

该CSS无关紧要，但是source code is here。

选项卡工作正常：当我点击其中一个选项卡时，传送带滑动到相应的幻灯片，并且正确的选项卡变为活动（高亮）。传送带控件（左侧和右侧）部分工作：当我点击其中一个控件（或自动滑动）时，传送带滑动到合适的幻灯片，但活动选项卡不会改变。 如何在传送带滑动时使活​​动标签更改？

这是我在我的JavaScript走到这一步：

$(document).ready(function() { 
    $carousel.carousel(); 
    $('#whatIsCarousel').on('slide.bs.carousel', function(e) { 
     var from = active.index(); 
     var next = $(event.relatedTarget); 
     var to = next.index(); 

     // Is to the index of the next slide? 
     // How do I find tab that needs to be active next? 
    }); 
}); 

Answer 1

我希望这样可以帮助你：

Bootply：http://www.bootply.com/116312

的js：

$(document).ready(function() { 
    $('.carousel').carousel(); 
    $('#whatIsCarousel').on('slide.bs.carousel', function(e) { 
     var from = $('.nav li.active').index(); 
     var next = $(e.relatedTarget); 
     var to = next.index(); 

     // This could interest you 
     $('.nav li').removeClass('active').eq(to).addClass('active'); 

    }); 
}); 

所

关注：

$('.nav li').removeClass('active').eq(to).addClass('active'); 

您所有标签中取出active类，并将其添加到具有相同的索引选项卡。

Answer 2

试试这个

$(document).ready(function() { 
    $('#myCarousel').carousel({ 
     interval: 4000 
    }); 

    var clickEvent = false; 
    $('#myCarousel').on('click', '.nav a', function() { 
      clickEvent = true; 
      $('.nav li').removeClass('active'); 
      $(this).parent().addClass('active');   
    }).on('slid.bs.carousel', function(e) { 
     if(!clickEvent) { 
      var count = $('.nav li').length -1; 
      var current = $('.nav li.active'); 
      current.removeClass('active').next().addClass('active'); 
      var id = parseInt(current.data('slide-to')) +1; 
      if(count+1 == id) { 
       $('.nav li').first().addClass('active');  
      } 
     } 
     clickEvent = false; 
    }); 
});