jQuery cycle2: перемещаться по слайдам при прокрутке

В настоящее время я использую плагин Cycle2 для создания слайд-шоу (http://jquery.malsup.com/cycle2/), вместо того, чтобы запускать смену слайда при нажатии, я хочу запускать его при прокрутке. По сути, я пытаюсь воспроизвести что-то вроде этого: http://loris-cormoreche.com, но с плагином cycle2.

У меня есть codepen, настроенный для демонстрации проблемы: http://codepen.io/neal_fletcher/pen/NrRdmP Если вы прокрутите, вы увидите проблему, с которой я сталкиваюсь, изображения продолжают мерцать, и он также циклически перебирает более одного изображения за раз, в общем, просто довольно глючит. Код, который у меня сейчас есть, выглядит следующим образом:

$('.cycle-slideshow').on( 'DOMMouseScroll mousewheel', function ( event ) {
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        $('.cycle-slideshow').cycle('next');
        console.log('Down');
    } else {
       $('.cycle-slideshow').cycle('prev');
       console.log('Up');
    }
    //prevent page fom scrolling
    return false;
});

Буду очень признателен за любые предложения или способы улучшить это!


javascript html jquery jquery-cycle
person user1374796    schedule 18.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Причина, по которой это глючит, заключается в том, что событие запускается при каждом «щелчке прокрутки» или как бы вы это ни называли. Поэтому, когда вы прокручиваете, вы запускаете его несколько раз, что делает его прерывистым.

Я исправил это в этом codepen: http://codepen.io/LinusAronsson/pen/EygWpd

Что я сделал, так это изменил jQuery на следующее:

var scrollDisabled = false;
$('.cycle-slideshow').on('DOMMouseScroll mousewheel', function(event) {

 if (scrollDisabled)
     return;

  if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
  $('.cycle-slideshow').cycle('next');
    console.log('Down');
  } else {
    $('.cycle-slideshow').cycle('prev');
  console.log('Up');
    }
   //prevent page fom scrolling

   scrollDisabled = true;
   setTimeout(function(){scrollDisabled = false;}, 1200);

});

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

person Linus Aronsson    schedule 19.06.2016