JQuery addClass to thumbnail, когда слайд активен

Question

Я создаю функциональность слайдера с нуля. У меня есть список слайдов, и текущий слайд имеет класс «active-slide».

<ul class="slides"> 
    <li class ="active-slide"></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

У меня есть список соответствующих миниатюр, которые при нажатии на них слайдер показывает соответствующий слайд.

<ul class="thumbnails"> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

Все это работает правильно, а слайдер меняет слайды и добавляет класс «активный слайд». Что я пытаюсь сделать, это прослушать класс «active-slide», а затем добавить класс «active-thumb» к соответствующему миниатюре, чтобы пользователь знал, какая миниатюра в данный момент активирована. Ползунок использует предыдущий, следующий, а также разбивку на страницы, поэтому критически важно, что я всегда слушаю «активный слайд», поскольку он меняется каждые 10 секунд.

Я использую Backbones.js и не могу показать, как проверить активный индекс слайдов, а затем добавить класс «active-thumb» к соответствующему/совпадающему индексу активного эскиза.

Спасибо!

Answer 1

Создайте пользовательский атрибут.

<ul class="slides"> 
    <li data-index="1" class ="active-slide"></li> 
    <li data-index="2"></li> 
    <li data-index="3"></li> 
    <li data-index="4"></li> 
</ul> 

<ul class="thumbnails"> 
    <li data-index="1"></li> 
    <li data-index="2"></li> 
    <li data-index="3"></li> 
    <li data-index="4"></li> 
</ul> 

При нажатии следующей или предыдущая:

$(".thumbnails [data-index='" + $('.slides .active-slide').attr('data-index') + "']").addClass("active-thumb"); 

код не проверял, но я думаю, вы получите идею.

Edit:

Чтобы удалить активный. Сохраните текущий индекс. Удалите все активные и снова примените активный актив с сохраненным ранее индексом.

// assume we click next 
var currentIndex = $('.slides .active-slide').attr('data-index'); 
$(".thumbnails li").removeClass("active-thumb"); 
$(".thumbnails [data-index='" + (currentIndex + 1) + "']").addClass("active-thumb"); 

Конечно, вам нужно немного больше, чтобы проверить, если ваш в конце или begening слайда, но я уверен, что вы можете справиться с этим.