如何在我的自定义 slider JavaScript 代码中插入自动播放选项

Question

I have created a slider code but the issue is I have to make it autoplay. This code actually compatible with my custom slider and I just want it to autoplay. I have tried some code shown below:

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("contents-2");
    var slides2 = document.getElementsByClassName("contents-1");
    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].className = slides[i].className.replace(" cont-1", "");
    }
    for (i = 0; i < slides2.length; i++) {
        slides2[i].className = slides2[i].className.replace(" cont-2", "");
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active-page", "");
    }
    dots[slideIndex - 1].className += " active-page";
    slides[slideIndex - 1].className += " cont-1";
    slides2[slideIndex - 1].className += " cont-2";
    setTimeout(currentSlide, 2000);
}

Please help me with this code, the code above does not autoplay, thank you.

Answer 1

you could add an interval function to your code

setInterval(function(){ plusSlides(1); }, 3000);

Answer 2

The new code I try is below:

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("contents-2");
  var slides2 = document.getElementsByClassName("contents-1");
  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].className = slides[i].className.replace(" cont-1", "");  
  }
  for (i = 0; i < slides2.length; i++) {
slides2[i].className = slides2[i].className.replace(" cont-2", "");
  }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active-page", "");
  }
  dots[slideIndex-1].className += " active-page";
  slides[slideIndex-1].className += " cont-1";  
  slides2[slideIndex-1].className += " cont-2";
  setTimeout(function() {
        showSlides(slideIndex += 1);
    }, 4000);
}

the code above works perfectly but when I use navigation buttons it autoplay at a very high speed