Добавить класс в прокрутку в бутстраповом табуляции

Question

Мне нужна небольшая помощь для добавления класса в свиток в bootstrap tabbing carousal. так вот моя страница URL

, когда я нажимаю на любую точку из tabing как 1,2,3 .. активный класс прибавляя tabing на то же самое, что идеально я использую это скрипт

$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');}); 

$('.tab li').on('click', function(){ 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

он работает отлично, поскольку класс добавляет li.active, но я также хочу использовать активный класс на текущей вкладке, когда я просматриваю контейнер табуляции. я добавил код прокрутки и работает идеально, но нужно класс, чтобы добавить в TAB-Ли, когда я прокручивать

здесь HTML-код, а

<div class="tab"> 
<div class="container-tab"> 
<ul class="list-inline nav"> 
<li data-target="#myCarousel" data-slide-to="0" class="active"> <a href="#"> 
<div class="round-tab-num"> 1 </div> 
<p>Working Smart <small>not harder</small> </p> 
</a> </li> 
<li data-target="#myCarousel" data-slide-to="1"> <a href="#"> 
<div class="round-tab-num"> 2 </div> 
<p>Working Smart <small>not harder</small> </p> 
</a> </li> 
<li data-target="#myCarousel" data-slide-to="2"> <a href="#"> 
<div class="round-tab-num"> 3 </div> 
<p>Working Smart <small>not harder</small> </p> 
</a> </li> 
<li data-target="#myCarousel" data-slide-to="3"> <a href="#"> 
<div class="round-tab-num"> 4 </div> 
<p>Working Smart <small>not harder</small></p> 
</a> </li> 
<li data-target="#myCarousel" data-slide-to="4"> <a href="#"> 
<div class="round-tab-num"> 5 </div> 
<p>Working Smart <small>not harder</small></p> 
</a> </li> 
</ul> 
<!--The main div for carousel--> 
<div id="myCarousel" class="carousel horizantal slide" data-interval="false"> 

<!-- Sliding images statring here --> 
<div class="carousel-inner"> 
<div class="item active"> 
<div class="carousel-caption"> 
<h3>test1</h3> 
</div> 
</div> 
<div class="item"> 
<div class="carousel-caption"> 
<h3>test2</h3> 
</div> 
</div> 
<div class="item"> 
<div class="carousel-caption"> 
<h3>test3</h3> 
</div> 
</div> 
<div class="item"> 
<div class="carousel-caption"> 
<h3>test4</h3> 
</div> 
</div> 
<div class="item"> 
<div class="carousel-caption"> 
<h3>test5</h3> 
</div> 
</div> 
</div> 

<!-- Next/Previous controls here --> 

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

этот код также добавил

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

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

Answer 1

изменения ваш код, как показано ниже, просто удаляет класс из текущего активного li и добавляет активный класс к следующему li, как показано ниже

$('#myCarousel').bind('mousewheel', function(e) { 
    $(this).carousel('next'); 
    var $currentlyactive =$('li.active'); 
    $currentlyactive.removeClass('active'); 
    $currentlyactive.next().addClass('active'); 
}); 

Обновлено

$(document).ready(function() {  
    $('.carousel').carousel('pause'); 
}); 
$('#myCarousel').bind('mousewheel', function(e){$(this).carousel('next');}); 

$('.tab li').on('click', function(){ 
    $('li.active').removeClass('active'); 
    $(this).addClass('active'); 
}); 

это код вашей страницы HTML удалить все это карусельного код, связанный было сделано в custom.js ..