Автоматический клик по маркам на слайдере, чтобы сделать слайдер автовоспроизведения

Question

У меня есть пользовательский слайдер, который может вращать каждое изображение, когда я нажимаю маркеры. мне нужно, чтобы сделать его автовоспроизведением, поэтому я хочу, если страница будет готова, это триггер нажмите на 1-й пуле, затем 2 и обратно к 1-й пуле снова ...

пуль с использованием Аттрибута data-container для каждого слайда 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> 

и это содержимое слайдов:

<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> 

и вот мой FIDDLE

Любой он lp будет оценен :)

Answer 1

Вы можете использовать функцию setInterval, чтобы сделать это. И у вас код:

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

});

Демо:http://jsfiddle.net/9fupL7hc/1

Хорошо, я обновил код:

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

Демо: http://jsfiddle.net/9fupL7hc/8/