title: Slideshow Gallery made into automatic gallery
body: <p>Trying to make this slideshow gallery automatically rotate. I have posted the HTML, CSS and Javascript to this question for you to understand what the slideshow is doing. I am new to javascript and need a little bit of guidance if you are able to lend a hand on this project.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   var slideIndex = 1;
      showSlides(slideIndex);
      
      // Next/previous controls
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
      
      // Thumbnail image controls
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
      
      function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("demo");
        var captionText = document.getElementById("caption");
        if (n &gt; slides.length) {slideIndex = 1}
        if (n &lt; 1) {slideIndex = slides.length}
        for (i = 0; i &lt; slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i &lt; dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
        box-sizing: border-box;
      }
      
      /* Position the image container (needed to position the left and right arrows) */
      .container {
        position: relative;
      }
      
      /* Hide the images by default */
      .mySlides {
        display: none;
      }
      
      /* Add a pointer when hovering over the thumbnail images */
      .cursor {
        cursor: pointer;
      }
      
      /* Next &amp; previous buttons */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 40%;
        width: auto;
        padding: 16px;
        margin-top: -50px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
      }
      
      /* Position the "next button" to the right */
      .next {
        right: 0;
        border-radius: 3px 0 0 3px;
      }
      
      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }
      
      /* Number text (1/3 etc) */
      .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }
      
      /* Container for image text */
      .caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
      }
      
      .row:after {
        content: "";
        display: table;
        clear: both;
      }
      
      /* Six columns side by side */
      .column {
        float: left;
        width: 16.66%;
      }
      
      /* Add a transparency effect for thumnbail images */
      .demo {
        opacity: 0.6;
      }
      
      .active,
      .demo:hover {
        opacity: 1;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- Container for the image gallery --&gt;
      &lt;div class="container"&gt;
      
        &lt;!-- Full-width images with number text --&gt;
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;1 / 6&lt;/div&gt;
            &lt;img src="img_woods_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;2 / 6&lt;/div&gt;
            &lt;img src="img_fjords_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;3 / 6&lt;/div&gt;
            &lt;img src="img_mountains_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;4 / 6&lt;/div&gt;
            &lt;img src="img_lights_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;5 / 6&lt;/div&gt;
            &lt;img src="img_nature_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;div class="mySlides"&gt;
          &lt;div class="numbertext"&gt;6 / 6&lt;/div&gt;
            &lt;img src="img_snow_wide.jpg" style="width:100%"&gt;
        &lt;/div&gt;
      
        &lt;!-- Next and previous buttons --&gt;
        &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;#10094;&lt;/a&gt;
        &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;#10095;&lt;/a&gt;
      
        &lt;!-- Image text --&gt;
        &lt;div class="caption-container"&gt;
          &lt;p id="caption"&gt;&lt;/p&gt;
        &lt;/div&gt;
      
        &lt;!-- Thumbnail images --&gt;
        &lt;div class="row"&gt;
          &lt;div class="column"&gt;
            &lt;img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods"&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt; 
            &lt;img class="demo cursor" src="img_fjords.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway"&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt;
            &lt;img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords"&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt;
            &lt;img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt;
            &lt;img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise"&gt;
          &lt;/div&gt; 
          &lt;div class="column"&gt;
            &lt;img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am only trying to make this gallery slideshow play automatically and be able to change slides manually as well. If anyone has any ideas of how to do this they would be extremely welcomed.</p>
  
  <p>Thank you,</p>