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 < 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 :
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…