title: Need to create a clickable & automatic slideshow using JavaScript
body: <p>I am looking to create a slideshow in which the user can click to the next slide and also that the slideshow will automatically move to the next slide if no <code>click</code> takes place.  </p>
  
  <p>I have created the below code and if no click is made for 5 seconds it automates to the next slide with no problem, however the issue is that when the prev next button is <code>clicked</code> the slides start randomly automating within less of a second of each other?? </p>
  
  <p>I have looked online for the solution to this but there are no clear answers :( </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");
  
    if (n == undefined) {
      n = ++slideIndex
    }
  
    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";
  
    }
  
    slides[slideIndex - 1].style.display = "block";
  
    setTimeout(showSlides, 5000)
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mySlides {
    display: none;
  }
  
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -120px;
    padding-left: 10px;
    padding-right: px;
    padding-bottom: 10px;
    color: #A371D1;
    font-weight: bold;
    font-size: 60px;
    transition: 0.5s ease;
    border-radius: 0 15px 15px 0;
  }
  
  .next {
    right: 0px;
    border-radius: 15px 0px 0px 15px;
  }
  
  .prev:hover,
  .next:hover {
    background-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slideShowContainer"&gt;
  
    &lt;div class="mySlides fade3"&gt;
  
      &lt;img class="homePageSlides" id="slidePic1" src="Purplelimetree-images/HomePage/aboutUs6.jpg"&gt;
  
    &lt;/div&gt;
  
    &lt;div class="mySlides fade3"&gt;
  
      &lt;img class="homePageSlides" src="Purplelimetree-images/HomePage/manLookinAtTreeHouse.jpg"&gt;
  
    &lt;/div&gt;
  
    &lt;a class="prev" onclick="plusSlides(-1)"&gt;&amp;lsaquo;&lt;/a&gt;
  
    &lt;a class="next" onclick="plusSlides(1)"&gt;&amp;rsaquo;&lt;/a&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>