2013-11-26 2 views
2

Я использую fullPage.js для одного сайта пейджера. Он работает красиво. Он поддерживает прокрутку полных слайдов страниц при щелчке колеса прокрутки, и каждый слайд может также содержать горизонтальное слайд-шоу, которое обычно запускается в этой точке, щелкая одну из боковых стрелок.Прокрутите по горизонтали с помощью fullPage.js, возможно ли это с помощью колеса мыши?

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

+0

Существует рабочее решение здесь, в случае, если кто хочет, чтобы сделать это. https://stackoverflow.com/questions/32920251/fullpage-js-slide-horizontal-on-scroll – lowtechsun

ответ

0

Update 2016

Теперь fullPage.js обеспечивает Scroll Horizontally extension для него.


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

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

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

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

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

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

0

Вы можете сделать это с jquery.mousewheel как:

$('#fullpage').on('mousewheel', function(event) { 
     if (event.deltaY > 0){$.fn.fullpage.moveSlideRight();} 
     else{$.fn.fullpage.moveSlideLeft();} 
}); 

https://github.com/jquery/jquery-mousewheel

Смежные вопросы