title: How do I add next and previous buttons to my slideshow with jQuery?
body: <p>I have a slideshow that automatically transitions to the next picture with a timer but I want to add more functionality by pausing and by also being able to go to the next or the previous image. I am confused though on how to add those event handlers?</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>$(document).ready(function() {
   var nextSlide = $("#slides img:first-child");
   var nextCaption;
   var nextSlideSource;
    
   // the function for running the slide show
      var runSlideShow = function() {   
          $("#caption").fadeOut(1000);
          $("#slide").fadeOut(1000,
           function () {
                if (nextSlide.next().length == 0) {
       nextSlide = $("#slides img:first-child");
      }
      else {
       nextSlide = nextSlide.next();
      }
      nextSlideSource = nextSlide.attr("src");
      nextCaption = nextSlide.attr("alt");
      $("#slide").attr("src", nextSlideSource).fadeIn(1000);     
      $("#caption").text(nextCaption).fadeIn(1000);
     }
    )
   }
   
   // start the slide show
   var timer = setInterval(runSlideShow, 3000);
   
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      font-family: Arial, Helvetica, sans-serif;
      width: 380px;
      margin: 0 auto;
      padding: 20px;
      border: 3px solid blue;
  }
  h1, h2, ul, p {
   margin: 0;
   padding: 0;
  }
  h1 {
   padding-bottom: .25em;
   color: blue;
  }
  h2 {
   font-size: 120%;
   padding: .5em 0;
  }
  img {
   height: 250px;
  }
  #slides img {
   display: none;
  }
  #buttons {
   margin-top: .5em;
   text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Xochitl Menjivar&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
   &lt;script src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="slide_show.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;main&gt;
      &lt;h1&gt;Fishing Slide Show&lt;/h1&gt;
      &lt;h2 id="caption"&gt;Casting on the Upper Kings&lt;/h2&gt;
      &lt;img id="slide" src="images/casting1.jpg" alt=""&gt;
      &lt;div id="slides"&gt; 
          &lt;img src="images/casting1.jpg" alt="Casting on the Upper Kings"&gt;
          &lt;img src="images/casting2.jpg" alt="Casting on the Lower Kings"&gt;
          &lt;img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn"&gt;
          &lt;img src="images/fish.jpg" alt="Catching on the South Fork"&gt;
          &lt;img src="images/lures.jpg" alt="The Lures for Catching"&gt;
      &lt;/div&gt;
      &lt;div id="buttons"&gt;
       &lt;input type="button" id="prev" value="Previous" disabled&gt;
       &lt;input type="button" id="play" value="Pause"&gt;
       &lt;input type="button" id="next" value="Next" disabled&gt;      
      &lt;/div&gt;
  &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>