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

Я использую подключаемый модуль jQuery под названием cycle2 (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.

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

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


javascript event-listener jquery addeventlistener cycle2
person abbott567    schedule 06.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

«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;
    }
});
person J. Greene    schedule 16.06.2015