title: Automatic Slideshow Not Working JavaScript
body: <p>I am currently trying to understand how to create a slideshow in JavaScript from W3Schools. The Manual slideshow worked perfectly but the automatic slideshow is not working in any way.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="main_adverts"&gt;
          &lt;img class="slide" src="images/imgslider1.jpg"/&gt;
          &lt;img class="slide" src="images/imgslider2.jpg"/&gt;
          &lt;img class="slide" src="images/imgslider3.jpg"/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>JavaScript: </p>
  
  <pre><code>var myIndex = 0;
  carousel();
  
  function carousel() {
      var i;
      var x = document.getElementsByClassName("slide");
      for (i = 0; i &lt; x.length; i++) {
         x[i].style.display = "none";  
      }
      myIndex++;
      if (myIndex &gt; x.length) {myIndex = 1}    
      x[myIndex-1].style.display = "block";  
      setTimeout(carousel, 2000); // Change image every 2 seconds
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#main_adverts{
      width: 70%;
      height: 70%;
      position: absolute;
      top: 20%;
      left: 15%;
      border: 1px solid black;
  }
  
  #main_adverts img{
      width: 100%;
      height: 100%;
      position: absolute;
  }
  </code></pre>