Прослушиватель событий для Cycle2 Slider

Question

Я использую плагин jQuery цикл2 ( http://jquery.malsup.com/cycle2/), и я хочу нацелить другой элемент, когда конкретный слайд активен.

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

Слайдер цикла применяет класс с именем cycle-slide-active на активный слайд, а затем удаляет его, как только он переходит на следующий слайд.

Я могу заставить его работать, используя грязный бесконечный цикл, чтобы проверить класс по идентификатору, которому он назначен, следующим образом:

function checkForChanges() {
    var slide = jQuery('.cycle-slide-active:first').attr('id');
    var active

    if ( slide == s1) {
        active = s1;
    } else if ( slide == s2 ) {
        active = s2;
    } else if ( slide == s3 ) {
        active = s3;
    } else if ( slide == s4 ) {
        active = s4;
    }

    jQuery('.celeb-button').css('opacity', 0);
    jQuery('.celeb-button-'+active).css('opacity', 1);

    setTimeout(checkForChanges, 500);
}

Однако такой бесконечный цикл, который я знаю, является неправильным, и это также означает, что я не могу использовать эффект наведения, чтобы выделить цвет, поскольку бесконечный цикл постоянно изменяет непрозрачность до 0.

Я хочу добавить прослушиватель событий, чтобы функция запускалась в цикле слайдов, но я не могу нацелить это поведение.

Любые идеи очень приветствуются.

Answer 1

Вы можете использовать встроенное событие. Я использую функцию, которая позволяет инициализировать слайд-шоу без кода.

"opts" - это хеш, который содержит довольно много значений, чтобы увидеть их, вы можете просмотреть список в консоли, используя

console.log(Object.keys(opts));

opts.currSlide дает индекс слайда.

В исходном цикле вы могли получить идентификатор текущего слайда, просто используя this.id, к сожалению, это не работает в цикле 2. У меня также были проблемы с надежным получением текущего идентификатора при использовании индекса слайда, поэтому Я использовал prev.id, чтобы получить идентификатор предыдущего слайда и просто настроить свои условия соответственно

Если вы инициализируете слайд-шоу программно, измените имя класса ".cycle-slideshow" на свой идентификатор. Это отдельная команда. Я запускаю это непосредственно перед загрузкой слайда, вы также можете использовать 'цикл после', если вы хотите, чтобы он запускался сразу после загрузки слайда.

Ваш код будет выглядеть примерно так:

$( '.cycle-slideshow' ).on( 'cycle-before', function( event, opts, prev, next) {
    if ( prev.id == s1) {//you are on the second slide
        active = s2;
    } else if ( prev.id == s2 ) {
        active = s3;
    } else if ( prev.id == s3 ) {
        active = s4;
    } else if ( prev.id == s4 ) {
        active = s1;
    }
});