auto toggle between divs. settimeout not working

Question

i have created a div with three slides that user can toggle between them but the problem is i'm trying to make it as a auto slide but the settimeout it's not working.the toggle button works fine i can switch between slides without a problem. here is the code

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}
function showSlides(n) {
  var i;
  var slide = document.getElementsByClassName("slide");
  if (n > slide.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slide.length}
  for (i = 0; i < slide.length; i++) {
      slide[i].style.display = "none";  
  }
  slide[slideIndex-1].style.display = "block"; 
  setTimeout(showSlides, 2000);
}

and the stylesheet :

html , body {
  padding: 0;
  margin: 0;
  box-sizing: border-box ;
  text-align: center ;
}
/* Top */
.top {
overflow: hidden;
}
/* Navbar */
.navbar {
  display: flex ;
  flex-direction: row-reverse;
  background: transparent ;   
  align-items: center ;
  justify-content: space-between ;
  z-index: 9999;
  position : absolute ;
  width: 100%;
}
.navbar a {
  text-decoration: none ;
  color : #fff ;
  font-size: 17px;
  flex-shrink: 1 ;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 40px;
  padding: 10px;
}
.navbar a:nth-last-child(3) {
  margin-left: auto ;
}
/* slideshow */
.slideshow {
  width: 100%;
  position: relative;
}
.slide {
  padding: 100px;
  color : #fff;
}
#slide1 {
  background: url(bm2.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
#slide2 {
  background: url(bm3.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
#slide3 {
  background: url(bm1.jpg) no-repeat center center ;
  background-size: cover ;
  height: 457px;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev {
  left : 0;
  border-radius: 3px 0 0 3px;
}

i'll be glad to know what's wrong with my code or what i'm doing wrong here

thanks for your time.

Answer 1

If you want to call some function regularly every n seconds use function setInterval . Also you need to call plusSlides() and not showSlides() to update slideIndex value.

So remove setTimeout(showSlides, 2000); line from showSlides function and at the end of your code add this:

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

Answer 2

TLDR: Solution: Anonymus functions!

Replace this line:

setTimeout(showSlides, 2000);

with these:

setTimeout(function() {
    plusSlides(1);
}, 2000);

---

There are multiple problems here as I can tell:

setTimeout(showSlides, 2000);

1: You are trying to call the wrong function.

I think it's better to call plusSlides .

setTimeout(plusSlides, 2000);

---

2: You don't pass any arguments, but your functions require one.

setTimeout(plusSlides(1), 2000);

---

3: It will throw a callstack exception.

When you call a function like this, setTimeout wants to call the return value of plusSlides(1) which is undefined in this case, but the bigger problem is, that it calls itself infinite amount of times without any delay. So it creates an infinite loop.

For example, if you have this code:

function add(a + b) {
    return a + b;
}
setTimeout(add(1 + 2), 1000);

JavaScript interprets it like this:

setTimeout(3, 1000);

So you need to pass an anonymus function or a function name.