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