Bootstrap傳送帶活動的縮略圖樣式

Question

我有這個自定義引導傳送帶我試圖使用活動的縮略圖樣式更改。我需要使用div vs li保留縮略圖列表，以便我可以將它們保留在響應式網格中。

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

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

我已經把這個的jsfiddle證明什麼，我試圖實現： http://jsfiddle.net/vr3xyqpv/3/

在縮略圖中的紅色邊框應該留下可見的，而它在每張幻燈片。

它在第一次查看時似乎可以正常工作，但它很奇怪，一旦你點擊一個縮略圖，就會停止長時間的活動。

Answer 1

這裏有一個辦法：

小提琴：http://jsfiddle.net/ewx61o1k/1/

的js：

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

$('#myCarousel').on('slid.bs.carousel', function(){ 
    var index = $('.carousel-inner .item.active').index(); 
    $('.thumbs .item[data-slide-to="'+index+'"]').addClass('active'); 
});