If you want the horizontal slides in your website to autoplay every X seconds, this article is for you. 

We'll be explaining here how you can configure fullPage.js to force the automatic animation of one or multiple sliders on your page.

If you prefer to go straight to the example and skip the explanation here's a codepen with the demo:

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

And now let's go with the explanation for those who want to understand what's going on there.

We will be using the afterLoad callback for that. This means that whatever we write inside this function will be executed every time we change from one vertical section to another. As always, you can find all this information on the fullpage.js documentation.

So, the callback looks like this:

// executed every time we land on a different vertical section
afterLoad: function (origin, destination, direction) {
    // your code
}

Why are we using afterLoad and not afterSlideLoad? Because afterSlideLoad doesn't get fired on the first slide of the section. So, every time we land on a different vertical section we are going to check if this section contains any horizontal slider, and when it does, we are going to set an interval every 1 second. 

Intervals allow us to repeat the execution of any code inside them based on a given time on milliseconds. 

Here's an example of how this function looks like:

// executed every 1000 millseconds
setInterval(function () {
    console.log("hello");
}, 1000);

Now, what do we want to call every 1 second? In this case, because we want the slider to move to the right repeatedly we will call the fullpage.js method fullpage_api.moveSlideRight. What this does is exactly what its name describes: moving the slider to the right. So, for example, from Slide 1 to Slide 2.

Now, this interval never stops and it will start another instance of itself with every section with a slider. So, in order to fix this we will store a reference to it on a variable we can g_interval so we can clear it when landing on every vertical section. This way we will remove the previous interval and create a new one exactly from the second 0 whenever we need it.

Now, let's combine altogether and integrate it on a fullPage.js initialization: 

var g_interval;
new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],  
  afterLoad: function (origin, destination, direction) {
    clearInterval(g_interval);
    
    // 1000 milliseconds lapse
    const lapse = 1000;
    
    if(destination.item.querySelectorAll('.fp-slides').length){
      g_interval = setInterval(function () {
        fullpage_api.moveSlideRight();
      }, lapse);
    }
  }
});

This code will make sure that every single horizontal slider on your page autoplays itself. 

But... what if you only want some horizontal sliders to autoplay?

Autoplay only some sliders and not all

In this case, we need to specify somehow which ones we want to play automatically. In order to do so, we can use the HTML markup to make things easier and cleaner.

We will add the attribute data-auto on every section with horizontal slides that we want to autoplay. We won't check its content so it won't matter what value you use for it, but it is a common practise to use boolans, so let's use data-auto="true" for it.

Now we will be checking if the section where we land has such attribute and we will only start the automatic animation when it's the case.

Here's the code:

<div id="fullpage">
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 1.1</div>
    <div class="slide" data-anchor="slide2">Slide 1.2</div>
    <div class="slide" data-anchor="slide2">Slide 1.3</div>
  </div>
  <div class="section" data-auto="true">
    <div class="slide" data-anchor="slide1">Slide 2.1</div>
    <div class="slide" data-anchor="slide2">Slide 2.2</div>
    <div class="slide" data-anchor="slide2">Slide 2.3</div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 4.1</div>
    <div class="slide" data-anchor="slide2">Slide 4.2</div>
    <div class="slide" data-anchor="slide2">Slide 4.3</div>
  </div>
</div>

JavaScript:

var g_interval;

new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],  
  afterLoad: function (origin, destination, direction) {
    clearInterval(g_interval);
    
    // 1000 milliseconds lapse
    const lapse = 1000;
    const shouldAutoPlay = destination.item.hasAttribute('data-auto');

    const hasSlides = destination.item.querySelectorAll('.fp-slides').length;
    
    if(shouldAutoPlay && hasSlides){
      g_interval = setInterval(function () {
        fullpage_api.moveSlideRight();
      }, lapse);
    }
  }
});

And here's the codepen example:

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

 

You might also find these articles relevant: