Add autoscroll to slider

Question

I have such a question, how to make autoscrolling on this slider?

var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName('slide'); var dots = document.getElementsByClassName('dot'); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; }

 <div id="slider"> <div class="slide fade"> <div class="number-text">1/4</div> <img src="img/slide1.jpg" style="width: 100%" alt=""> <div class="text">Первый слайд</div> </div> <div class="slide fade"> <div class="number-text">2/4</div> <img src="img/slide2.jpg" style="width: 100%" alt=""> <div class="text">Второй слайд</div> </div> <div class="slide fade"> <div class="number-text">3/4</div> <img src="img/slide3.jpg" style="width: 100%" alt=""> <div class="text">Третий слайд</div> </div> <div class="slide fade"> <div class="number-text">4/4</div> <img src="img/slide4.jpg" style="width: 100%" alt=""> <div class="text">Четвертый слайд</div> </div> <a class="prev" onclick="plusSlides(-1)"> <img src="img/arrow-left.png" alt=""> </a> <a class="next" onclick="plusSlides(1)"> <img src="img/arrow-right.png" alt=""> </a> </div> <br> <div style="text-align: center;"> <span class="dot active" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>

Can you upload pictures here (to this site) and add to your slider?
So it will be better and more visually to look in the started code.
I just literally since yesterday on this site, so far I haven’t figured out everything, how it works here
So take and use links in src instead of img/slide1.jpg , etc.

L. Vadim L. Vadim 3.228 1 golden mark 5 silver marks 18 bronze marks · Accepted Answer · 2017-01-24T11:40:56

Added setInterval : everything works

 var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName('slide'); var dots = document.getElementsByClassName('dot'); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (var i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace("active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } var i = 1; setInterval(function(){ currentSlide(i) i++; if(i == 5) { i = 1; } },2000)

 <div id="slider"> <div class="slide fade"> <div class="number-text">1/4</div> <img src="img/slide1.jpg" style="width: 100%" alt=""> <div class="text">Первый слайд</div> </div> <div class="slide fade"> <div class="number-text">2/4</div> <img src="img/slide2.jpg" style="width: 100%" alt=""> <div class="text">Второй слайд</div> </div> <div class="slide fade"> <div class="number-text">3/4</div> <img src="img/slide3.jpg" style="width: 100%" alt=""> <div class="text">Третий слайд</div> </div> <div class="slide fade"> <div class="number-text">4/4</div> <img src="img/slide4.jpg" style="width: 100%" alt=""> <div class="text">Четвертый слайд</div> </div> <a class="prev" onclick="plusSlides(-1)"> <img src="img/arrow-left.png" alt=""> </a> <a class="next" onclick="plusSlides(1)"> <img src="img/arrow-right.png" alt=""> </a> </div> <br> <div style="text-align: center;"> <span class="dot active" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>

Thank you very much, I could not understand where exactly the setInterval should be set

Add autoscroll to slider

1 answer 1

More articles: