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); } } }); } } });
});
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
Post a Comment