Reputation: 643
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.
Upvotes: 0
Views: 665
Reputation: 981
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
.
Upvotes: 1
Reputation: 58455
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.
Upvotes: 1