jamez14 jamez14 - 7 months ago 27
Javascript Question

fullPage.js auto cycle through slideshow unable to advance to next section

I'm working with the fullPage.js plugin for a simple site I am doing.

tl;dr



What is the best way to allow a user to scroll past the slideshow while it is still cycling through the slides, so they can continue viewing the other sections of the site?

Where my code stands now...



I have created the functionality to automatically start cycling through the different slides of the slideshow in one of my sections, based on this GitHub issue that was answered. You can see my jsFiddle linked below to see it in action.

My Issue



The issue I am having is using this
setTimeout
to cycle through the slides automatically, if I try to then scroll (or navigate in any way) to another section of my page, the
setTimeout
keeps going and therefore I am taken back up to the slideshow as it continues to cycle. My code using the
setTimeout
looks like this:

afterRender: function () {
//on page load, start the slideshow
setTimeout(function () {
$.fn.fullpage.moveTo(1, 0);
}, 1000);
},
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
if (anchorLink == 'home') {
//make the slideshow automatically go!
setTimeout(function () {
$.fn.fullpage.moveTo(1, slideIndex + 1);
}, 1000);

//if you are at the last slide
//then cycle back to the first
if (slideIndex == 2) {
setTimeout(function () {
$.fn.fullpage.moveTo(1, 0);
}, 1000);
}
}
}


What I tried



I looked into the issue and saw a possible solution was to
clearInterval
. I figured the best time to do this would be in the
onLeave
callback
.

onLeave: function (index, direction) {
//after leaving section 1 (home) and going anywhere else, stop the slideshow
if (index == '1') {
clearInterval(slideTimeout);
}
}


I set a global
slideTimeout
variable at the top of my page and then set my
setTimeout
above equal to this variable, but it does not actually seem to be doing a
clearInterval
and instead the slideshow just keeps cycling through its slides. I verified (through console.log) that when I scroll down to the next section from the slideshow, the
onLeave
callback is indeed being hit.

I'm not entirely sure
clearInterval
is my ideal solution, because I don't necessarily want the slideshow to stop cycling altogether (because eventually the user may return to the slideshow and I want it to keep cycling).

I have the code available here in a jsFiddle

Answer

The onLeave callback was changed time ago. Now it has 3 parameters instead of 2 as you can see in the documentation:

onLeave: function(index, nextIndex, direction){

onLeave (index, nextIndex, direction) This callback is fired once the user leaves a section, in the transition to the new section.

Here you have it working with setInterval and clearInterval. I also used moveSlideRight instead of moveTo and I removed the afterSlideLoad callback which is not needed anymore.

This is the resulting code:

var slideTimeout;

$('#fullpage').fullpage({
    sectionsColor: ['#ccc', '#999', '#777'],
    anchors: ['home', 'about', 'contact'],
    animateAnchor: false,
    menu: '.nav',
    paddingTop: '50px',
    verticalCentered: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    css3: true,
    afterRender: function () {
        //on page load, start the slideshow
         slideTimeout = setInterval(function () {
                $.fn.fullpage.moveSlideRight();
            }, 1000);
    },


    onLeave: function (index, direction) {
        //after leaving section 1 (home) and going anywhere else, whether scrolling down to next section or clicking a nav link, this SHOULD stop the slideshow and allow you to navigate the site...but it does not
        if (index == '1') {
            console.log('on leaving the slideshow/section1');
            clearInterval(slideTimeout);
        }
    }
});