fullpage.js offers the option to display slides in sections which navigate horizontally. The plugin uses a scroll-left or scroll-right transform for changing slides.
The plugin however doesn't support cyclic loop back for slides. This means that after the last slide, the slides container will scroll-left all the way to the first slide. If there are 3 or more slides, this can be an unwanted effect.
An elegant solution to this is to nullify the scrolling and use a fade-in effect for each slide. This can be achieved by using the plugin's options to hook callbacks on slide transitions as shown below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var SCROLLING_SPEED = 700; | |
| // fullPage.js settings for fading-in slides insead of scrolling them | |
| $('#fullpage').fullpage({ | |
| scrollingSpeed: SCROLLING_SPEED, | |
| // Hide the slides container before the next slide loads | |
| onSlideLeave: function(anchorLink, index, slideIndex, direction) { | |
| $.fn.fullpage.setScrollingSpeed(0); | |
| $('.fp-section').find('.fp-slidesContainer').hide(); | |
| }, | |
| // Display the slides container by fading it in after the next slide has been loaded. | |
| afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) { | |
| $('.fp-section').find('.fp-slidesContainer').fadeIn(700); | |
| $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED); | |
| }, | |
| }); |
