Fullpage.js Slide horizontal on scroll

匿名 (未验证) 提交于 2019-12-03 01:23:02

问题:

Im using fullpage.js to achieve vertical and horizontal scroll.

i want the slider to slide when i scroll on Section 2.

Functionality similar to this website

Here's my code :

$(document).ready(function() { $('#fullpage').fullpage({     sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],     anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],     menu: '#menu',     css3: true,     loop: false,     afterLoad: function(anchorLink, index) {         var loadedSection = $(this);          //using index         if (index == 3) {             $.fn.fullpage.setAllowScrolling(false);             $.fn.fullpage.setKeyboardScrolling(false);             $(window).bind('mousewheel DOMMouseScroll', function(event) {                 if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail 

});

For visual :

回答1:

Finally got it working :

var slideIndex  = 1, sliding     = false; 

$(document).ready(function() {

$('#fullpage').fullpage({      sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],     scrollingSpeed:1000,     css3: true,      onLeave: function(index, nextIndex, direction) {          if(index == 2 && !sliding) {              if(direction == 'down' && slideIndex  1) {                  sliding = true;                 $.fn.fullpage.moveSlideLeft();                 slideIndex--;                 return false;              }          } else if(sliding) {              return false;          }      },      afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {          sliding = false;      }  }); 

});



回答2:

Here is a little bit more elaborate example which resumes the code of @undefinedtoken :)

Plan:

Exemple Code :

$(document).ready(function () {          var slideIndex2 = 1, sliding = false;          $('#fullpage').fullpage({              // ...your cutom code...              //events             onLeave       : function (index, nextIndex, direction) {                 if (index == 3 && !sliding) {                     if (direction == 'down' && slideIndex2  1) {                         sliding = true;                         $.fn.fullpage.moveSlideLeft();                         return false;                     }                 } else if (sliding) {                     return false;                 }              },             afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {                 sliding = false;             },             onSlideLeave  : function (anchorLink, index, slideIndex, direction, nextSlideIndex) {                 if (index == 3) {                     if (direction == 'right') {                         sliding = true;                         slideIndex2++;                     }                      if (direction == 'left') {                         sliding = true;                         slideIndex2--;                     }                 }             }         });     }); 


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!