CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vany Diah P
Vany Diah P

Reputation: 643

Auto click bullets on slider to make slider autoplay

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, then 2nd, and back to 1st bullet again...

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>
    </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"/>
        </header>
    </div>
    <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"/>
        </header>

    </div>

and here's my FIDDLE

Any help is going to be appreciated :)

Upvotes: 2

Views: 1101

Answers (1)

Radonirina Maminiaina
Radonirina Maminiaina

Reputation: 7004

You can use setInterval function to do this. And in you code:

pageTriggers.forEach( function( pageTrigger ) {
pageTrigger.addEventListener( 'click', function( ev ) {
    ev.preventDefault();
    navigate( this );
    console.log(pageTrigger);
} );
setInterval(function() {
    navigate( pageTrigger );
}, 5000);

} );

Demo: http://jsfiddle.net/9fupL7hc/1

Ok, i updated the code:

var id = 1;
setInterval(function() {
    id ++;
    if ( id <= document.querySelectorAll(".container").length ) {
        navigate( document.querySelector('a[data-container="container-' + id + '"') );
    } else {
        id = 1;
    }
}, 5000);

Demo: http://jsfiddle.net/9fupL7hc/8/

Upvotes: 2

Related Questions