javascript - Fullpage.js Slide horizontal on scroll -


im using fullpage.js achieve vertical , horizontal scroll.

i want slider slide when scroll on section 2.

functionality similar website

here's 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 < 0) {                     $(".fp-prev").click();                     if ($(".fp-slide:first-child").hasclass("active")) {                         $.fn.fullpage.setallowscrolling(true);                         $.fn.fullpage.setkeyboardscrolling(true);                     }                 } else {                     $(".fp-next").click();                     if ($(".fp-slide:last-child").hasclass("active")) {                         $.fn.fullpage.setallowscrolling(true);                         $.fn.fullpage.setkeyboardscrolling(true);                     }                 }             });         }     } }); 

});

for visual :enter image description here

finally got 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 < 5) {                  sliding = true;                 $.fn.fullpage.moveslideright();                 slideindex++;                 return false;              } else if(direction == 'up' && slideindex > 1) {                  sliding = true;                 $.fn.fullpage.moveslideleft();                 slideindex--;                 return false;              }          } else if(sliding) {              return false;          }      },      afterslideload: function(anchorlink, index, slideanchor, slideindex) {          sliding = false;      }  }); 

});


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -