如何添加類來引導縮略圖上的滑塊來調節

Question

能否請您看看this link，讓我知道，讓我知道我可以在畫廊旋轉木馬控制點擊添加類.highlight要麼大拇指？

正如你可以從代碼中看到我使用下面的代碼高亮顯示所選大拇指：

var classHighlight = 'highlight'; 
var $thumbs = $('.thumbnail').click(function(e) { 
e.preventDefault(); 
$thumbs.removeClass(classHighlight); 
$(this).addClass(classHighlight); 
}); 

好，我不知道這是正確的方式，但它爲我工作！但正如我所說，這是工作的點擊.thumbnail但我需要的是添加類縮略圖上滑動事件。我已經添加此CSS來我的代碼，但它不工作！

.thumbnail:active{ 
    border-style:solid; 
    border-width:5px; 
    border-color:gery; 
    } 

感謝您的時間和評論

Answer 1

您可以更改幻燈片功能來做到這一點（加2底線）：

// When the carousel slides, auto update the text 
    $('#myCarousel').on('slid', function (e) { 
      var id = $('.item.active').data('slide-number'); 
      $('#carousel-text').html($('#slide-content-'+id).html()); 
     $('#slider-thumbs > div > ul > li > a').removeClass('highlight'); 
     $('#carousel-selector-'+id).addClass('highlight'); 
    }); 

要選擇第一在頁面加載縮略圖添加此行上面，旋轉木馬的初始化後：

$('#carousel-selector-0').addClass('highlight'); 

小提琴：DEMO