javascript - Auto click bullets on slider to make slider autoplay -

i have custom slider can rotate each image when click bullets. need make autoplay, want if page ready, it's trigger click on 1st bullet, 2nd, , 1st bullet again...

the bullets using attr data-container 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 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 fiddle

any going appreciated :)

you can use setinterval function this. , in code:

pagetriggers.foreach( function( pagetrigger ) { pagetrigger.addeventlistener( 'click', function( ev ) {     ev.preventdefault();     navigate( );     console.log(pagetrigger); } ); setinterval(function() {     navigate( pagetrigger ); }, 5000); 

} );

demo: http://jsfiddle.net/9fupl7hc/1

ok, updated 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/