title: Automatic and manual slideshow
body: <p>I have to make a slideshow that has to work both automatic and manual. </p>
  
  <p>For the manual part I have two buttons: next and previous that allows me to see the photos without having to wait a certain period of time between images. </p>
  
  <p>When I don't click on the buttons, the slideshow goes automatic and the images change after six seconds (for example). </p>
  
  <p>My problem is that, after I click on the previous/ next button, the images start to appear faster or they appear more than one on the screen. </p>
  
  <p>Here is the code I am working with:</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 showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("hidden");
  
    if (n===undefined){n= ++slideIndex;}
    if (n &gt; slides.length) {slideIndex = 1;}
    if (n &lt; 1) {slideIndex = slides.length}
  
    $(slides[slideIndex-1]).fadeIn(2000);
    slides[slideIndex-1].style.display = "block";
    $(slides[slideIndex-1]).delay(3000);
    $(slides[slideIndex-1]).fadeOut(1000);
  
    setTimeout(showSlides, 6000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;jQuery&lt;/title&gt;
    &lt;link rel="stylesheet" href="lab5.css" media="screen" title="no title"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1 class="titlu"&gt;Goodies&lt;/h1&gt;
    &lt;div align="center"&gt;
      &lt;button class="button" onclick="plusSlides(-1)" &gt;Previous&lt;/button&gt;
      &lt;button class="button" onclick="plusSlides(1)" &gt;Next&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="hidden"&gt;
      &lt;h4 class="num" &gt; 1 / 5 &lt;/h4&gt;
      &lt;img src="http://placehold.it/150x150?text=1"&gt;
    &lt;/div&gt;
    &lt;div class="hidden"&gt;
      &lt;h4 class="num"&gt; 2 / 5 &lt;/h4&gt;
      &lt;img src="http://placehold.it/150x150?text=2"&gt;
    &lt;/div&gt;
    &lt;div class="hidden"&gt;
      &lt;h4 class="num"&gt; 3 / 5 &lt;/h4&gt;
      &lt;img src="http://placehold.it/150x150?text=3"&gt;
    &lt;/div&gt;
    &lt;div class="hidden"&gt;
      &lt;h4 class="num"&gt; 4 / 5 &lt;/h4&gt;
      &lt;img src="http://placehold.it/150x150?text=4"&gt;
    &lt;/div&gt;
    &lt;div class="hidden"&gt;
      &lt;h4 class="num"&gt; 5 / 5 &lt;/h4&gt;
      &lt;img src="http://placehold.it/150x150?text=5"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way I can make the slideshow return to its "speed" of showing the images every six seconds after I click on previous/next? </p>
  
  <p>Also, how can I prevent it from showing more than one image at a time?</p>