Как добавить класс к загрузочным миниатюрам при изменении ползунка

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

Чтобы выбрать первый thumbnail на странице загрузки добавить эту строку сверху, после инициализации карусели:

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

Fiddle: DEMO