CODEWITHSUNDEEP
javascript
user3561061
user3561061

Reputation: 11

How to change slides every 5 seconds of this JS slider?

I know it has something to do with setInterval, but I can't seem to figure it out. I don't know a lot about JS, and I found this slider code on the internet :) I'm still struggling with JS a lot.

HTML:

    <article class="slideshow-container">
        <div class="mySlides">
            <div class="quote-container">
                <h5 class="quote-titel">Titel text</h5>
                <p>Quote text</p>
            </div>
        </div>
        <div class="mySlides">
            <div class="quote-container">
                <h5 class="quote-titel">Titel text</h5>
                <p>Quote text</p>
            </div>
        </div>
    </article>
    <article class="dot-container">
        <div class="nav-container">
            <a class="prev" onclick="plusSlides(-1)"><img src="./img/svg/arrow-left.svg"></a></div>
            <div class="dots">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
            </div>
            <div class="nav-container">
                <a class="next" onclick="plusSlides(1)"><img src="./img/svg/arrow-right.svg"></a> 
       </div>
    </article>

JS:

    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("mySlides");
  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 (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";
}

Thanks in advance!

Upvotes: 0

Views: 656

Answers (2)

Abhilash
Abhilash

Reputation: 2256

  • Use setInterval this way to traverse over your elements.
  • On clicking Prev/Next make sure you cancel out the auto-sliding by using clearInterval
  const interval = setInterval(() => {
    if (userInterrupt) {
        clearInterval(interval);
        return;
    }
    plusSlides(1);
  }, 5000);

Complete example: https://jsfiddle.net/3ou6kn4q/1/

Upvotes: 0

Ozan ERT&#220;RK
Ozan ERT&#220;RK

Reputation: 359

You almost there,

changeSlideInterval = setInterval(()=>plusSlides(1),5000)

//when you dont need it do not forget to destroy it
clearInterval(changeSlideInterval)

Here is a working example: https://jsfiddle.net/er28zt71/6/

Addition to that,

  • It was too hard to understand the problem here because you did not share a wroking code, for this kind of questions you could use https://jsfiddle.net/ (I have to google your code and find it was an example of w3schools)
  • Even setInterval is beautiful, if you forget to destroy them they gladly consume your resources, so check out how setInterval and setTimeout works and how you should use them https://javascript.info/settimeout-setinterval
  • I have used the arrow function above. when you are passing functions as parameters you should know how normal functions and arrow functions make difference. so check out them and how context works in javascript. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Upvotes: 1

Related Questions