Auto click bullets on slider to make slider autoplay for all slides

Question

I have a custom slider which can rotate each image when I click the bullets. I need to make it autoplay, so I want if the page is ready, it's trigger click on the 1st bullet, 2nd, 3rd, 4th, etc and back to 1st bullet again... but it just works for 1st and 2nd slides only.

The bullets using attr data-container for each slide id :

<nav class="thumb-nav">
        <a data-container="container-1" class="thumb-nav__item" href="#"><span>1</span></a>
        <a data-container="container-2" class="thumb-nav__item" href="#"><span>2</span></a>
                    <a data-container="container-3" class="thumb-nav__item" href="#"><span>3</span></a>
        <a data-container="container-4" class="thumb-nav__item" href="#"><span>4</span></a>
    </nav>

and these are the slide contents:

<div id="container-1" class="container theme-1">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header01.jpg" alt="Lava"/>
            <!-- /intro__content -->
        </header><!-- /intro -->
    </div><!-- /container -->
    <div id="container-2" class="container theme-2">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" alt="Road"/>
            <!-- /intro__content -->
        </header><!-- /intro -->

    </div>
 <div id="container-3" class="container theme-3">
        <header class="intro">
              <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header03.jpg"     alt="Lava"/>
         </header>
 </div>
 <div id="container-4" class="container theme-4">
        <header class="intro">
            <img class="intro__image" src="http://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg" alt="Lava"/>
      </header>
   </div>

and here's my FIDDLE

Any help is going to be appreciated.

Answer 1

The setInterval is not supposed to be inside the forEach loop.

var pageIndex = 0;
setInterval(function() {
    pageIndex ++;
    if(pageIndex >= pageTriggers.length) pageIndex = 0;
    navigate( pageTriggers[pageIndex] );
}, 5000);

Refer jsFiddle

Hope this helps. Let me know if your question is not answered.

Edit:

if(pageIndex >= pageTriggers.length)

Note: I am creating a new pageIndex here, you might consider using your already defined global variable current .

Answer 2

First: You need to move your setInterval block outside of your outside of pageTriggers.forEach block. As you have it, it is creating a timer for each of the slides but then the first one is overriding the others (which is why it's only bouncing between your first two slides).

Second: Outside of the forEach you can't pass this to your navigate function. So you're going to need some other way of figuring out which slide to go to. That new slide is represented below by newIndex .

Solution:

setInterval(function () {
    var newIndex = current + 1 >= pageTriggers.length ? 0 : current + 1
    navigate(pageTriggers[newIndex]);
}, 5000);

See the fiddle .

Nice job though, I like it.