You can play sections automatically in fullPage.js if you wish to do so. This way the carousel will autoplay itself and move to the next section every X seconds. Kind of like an automatic slider or carousel. 

This is not a feature that comes out of the box with fullPage.js but you can definitely make it happen by using fullPage.js methods and callbacks. fullPage.js is ready for it!

Of course, you can also use autoplay for horizontal slides in fullpage.js, so check that out too if interested. 

Before starting with the explanation, a codepen is worth more than a thousand words, so here you have an example you can copy-paste.

See the Pen fullPage.js - Autoplay Vertical Slides by Álvaro (@alvarotrigo) on CodePen.

The way it works is quite simple. Basically, we are going to tell fullPage.js that every time it lands in a new section, we have to wait for 1 second ( 1000 milliseconds ) and then scroll down to the next section. And, if there are no sections left, we will scroll down to the 1st section in some kind of infinite loop.

So, how do we go about it? Simple too. We will be using the afterLoad callback to detect when we landed in a new section. Then we will be using the JavaScript function setTimeout to add a delay of 1000 milliseconds before telling fulpage.js to move to the next section with the method fullpage_api.moveSectionDown();. This show it looks:

  afterLoad: function (origin, destination, direction) {
 
    // 1000 milliseconds lapse
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
    
  }

Notice how we are saving the interval ID on a variable called g_interval.The purpose is to make sure that if the user scrolls up or down to another section the delay (1 second in this case) will reset itself and start from 0 again.

To do so, we clear the interval when leaving the current section by using the callback onLeave.

  onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },

And the last thing: we also used the fullpage.js option continuousVertical: true to make sure that once we reach the last section at the very bottom fullPage.js will keep on scrolling down to go back to the first section and creating this way the infinite loop.

And this is what the whole code looks like:

var g_interval;
new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  continuousVertical: true,
  onLeave: function(origin, destination, direction){
    clearInterval(g_interval);
  },
  afterLoad: function (origin, destination, direction) {
 
    // 1000 milliseconds lapse
    const lapse = 1000;
    
    g_interval = setInterval(function () {
      fullpage_api.moveSectionDown();
    }, lapse);
    
  }
});

Preventing user scroll

If you want to disable the scroll of the user so the slider will not allow interactions and keep on scrolling, then you'll have to call the method fullpage_api.setAllowScrolling(false); after fullPage.js initialization. 

new fullpage(.......)
fullpage_api.setAllowScrolling(false);

Here's a codepen:

See the Pen fullPage.js - Autoplay Vertical Slides disabling user scroll by Álvaro (@alvarotrigo) on CodePen.

 

 

You might also find these articles relevant: