title: Automatic slideshow with prev and next indicators
body: <p>I am trying to create a sideshow that will automatically transition from one picture to the next but also be able to let the user manually change the slide using previous and next indicators. </p>
  
  <p>I am using the tutorial from this link:
  <a href="https://www.w3schools.com/howto/howto_js_slideshow.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_slideshow.asp</a></p>
  
  <p>But they don't merge the two together and I cannot find any way to get it to work.</p>
  
  <p>This is the code that I have:</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);
    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 &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", "");
      }
      if (slideIndex&gt; slides.length) {slideIndex = 1}
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Slideshow container */
  .slideshow-container {
    display:                 flex;
    display:                 -webkit-flex; /* Safari 8 */
    flex-wrap:               wrap;
    -webkit-flex-wrap:       wrap;         /* Safari 8 */
    justify-content:         center;
    -webkit-justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4%;
    width: auto;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
  }
  
  .slideshow-container img {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
  }
  
  @media screen and (max-width: 1000px) {
    .slideshow-container {
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
    }
  }
  
  .mySlides {
     display: none;
  }
  
  /* Next &amp; previous buttons */
  .prev, .next {
   cursor: pointer;
   position: absolute;
   top: 45%;
   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;
  }
  
  /* Position the "next button" to the right */
  .next {
   right: 0;
   border-radius: 3px 0 0 3px;
  }
  
  .prev {
   left: 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);
  }
  
  /* Caption text */
  .text {
   color: #f2f2f2;
   font-size: 15px;
   padding: 8px 12px;
   position: absolute;
   bottom: 50px;
   width: 100%;
   text-align: center;
  }
  
  /* The dots/bullets/indicators */
  .dot {
   cursor: pointer;
   height: 13px;
   width: 13px;
   bottom: 50px;
   margin: 0 2px;
   position: relative;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
   background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 4s;
   animation-name: fade;
   animation-duration: 4s;
  }
  
  @-webkit-keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
  }
  
  @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slideshow-container"&gt;
    &lt;div class="mySlides fade"&gt;&lt;a href="#"&gt;&lt;img src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg" style="width:100%"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="mySlides fade"&gt;&lt;a href="#"&gt;&lt;img src="http://www.firstnaturetours.com/images/content/oregon-coast-2000x800.jpg" style="width:100%"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="mySlides fade"&gt;&lt;a href="#"&gt;&lt;img src="http://hdwallpapersbuzz.com/wp-content/uploads/2016/11/Sunrise-Beach-Koh-Lipe-Thailand-HD-Photo-17.jpg" style="width:100%"&gt;&lt;/a&gt;&lt;/div&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;br&gt;
    &lt;div style="text-align:center"&gt;
      &lt;span class="dot" onclick="currentSlide(1)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentSlide(2)"&gt;&lt;/span&gt;
      &lt;span class="dot" onclick="currentSlide(3)"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>