Using fade-in effect with fullpage.js slides

Update (08/09/2016): Starting version 2.8.6, fullpage.js now has built-in support for fade-in effect for slides via the 'faddingEffect' extension.

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.

	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);
	},
	});

view raw fullPage-settings.js hosted with ❤ by GitHub