帶標籤的傳送帶：當傳送帶滑向下一張或上一張幻燈片時調整活動標籤

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; 
    }); 
});