Quisiera saber cómo hago para que un slider corra por si solo. Solamente está corriendo con las flechas. Éste es mi código
(function() {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
arrowLeft.addEventListener('click', function() {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function() {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
<div class="wrapper">
<div id="slider">
<div class="image image-one">
<div class="vertical-align-wrapper">
<div class="contenedor">
<h1><strong>BUSCAR </strong>LO QUE<br>SOÑAMOS</h1>
<button type="button" class="btn btn-1 btn-1e ">NUESTROS PROYECTOS</button>
</div>
</div>
</div>
<div class="image image-two">
<div class="vertical-align-wrapper">
<div class="contenedor">
<h1><strong>BUSCAR </strong>LO QUE<br>SOÑAMOS</h1>
<button type="button" class="btn btn-1 btn-1e ">NUESTROS PROYECTOS</button>
</div>
</div>
</div>
<!--<div class="image image-three">
<div class="vertical-align-wrapper">
<span>Slide 3</span>
</div>
</div>-->
</div>
<div class="arrows">
<div id="left-arrow" class="arrow">
<a href=""></a>
</div>
<div id="right-arrow" class="arrow">
<a href=""></a>
</div>
</div>
</div>