title: How do I add Left/Right Arrow (Next/Previous) functionality to my jQuery image and text slider?
body: <p>Here's what I've got so far: <a href="http://jsfiddle.net/bpgabrielli/vpfsnhmh/" rel="nofollow">http://jsfiddle.net/bpgabrielli/vpfsnhmh/</a></p>
  
  <p>Currently, clicking on the text links below ("First Seal", etc) makes the corresponding text/image fade in. I would like to add the option to use the left and right arrows to go to the next and previous slide (also fading in and out). If the last slide is displayed and the right arrow is clicked, I would like it to return to the first slide and vice-versa.</p>
  
  <p>Any suggestions or critiques of the current code are welcome. Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="fadebox"&gt;
      &lt;img class="fade_arrows" id="left_arrow" src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" /&gt;
      &lt;div id="fadetxt"&gt;
        &lt;h2 class='opaque'&gt;Californian Monk Seal&lt;/h2&gt;&lt;p class='opaque'&gt;Bacon ipsum dolor amet corned beef drumstick jowl boudin kevin rump bresaola pork belly pig.&lt;/p&gt;
        &lt;h2&gt;Leopard Seal&lt;/h2&gt;&lt;p&gt;Tri-tip hamburger pork belly landjaeger andouille tenderloin. Turkey biltong bacon, filet mignon meatball shankle frankfurter shoulder.&lt;/p&gt;
        &lt;h2&gt;New Zealand Fur Seals&lt;/h2&gt;&lt;p&gt;Ribeye pork belly pancetta hamburger, ham prosciutto pork loin flank beef chicken. Boudin t-bone turkey pastrami chuck. Biltong pork loin alcatra ham hock shank landjaeger.&lt;/p&gt;
        &lt;h2&gt;Canadian Baby Seal&lt;/h2&gt;&lt;p&gt;Jerky sausage strip steak bresaola, pork cow capicola. Pork chop pork boudin tri-tip, frankfurter short loin leberkas capicola kevin shank shoulder rump strip steak cupim jerky.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="fade"&gt;
        &lt;img class='opaque' src="http://i.telegraph.co.uk/multimedia/archive/01661/seal_1661793c.jpg" /&gt;
        &lt;img src="http://i.telegraph.co.uk/multimedia/archive/01212/seal_1212980c.jpg" /&gt;
        &lt;img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/fur-seal_531_600x450.jpg" /&gt;
        &lt;img src="http://myweb.tiscali.co.uk/ladycroft/seal2.jpg" /&gt;
      &lt;/div&gt;
      &lt;img class="fade_arrows" id="right_arrow" src="http://guidelinesandprinciples.org/assessment/upload/surveys/117344/images/arrow_right_grey.png" /&gt;
  &lt;/div&gt;  
      &lt;p id="fade_controls"&gt;
        &lt;a class="hvr-glow-selected"&gt;First Seal&lt;/a&gt;
        &lt;a&gt;Second Seal&lt;/a&gt;
        &lt;a&gt;Third Seal&lt;/a&gt;
        &lt;a&gt;Fourth Seal&lt;/a&gt;
      &lt;/p&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
    $("#fade_controls").on('click', 'a', function() {
  
      $("#fade img").removeClass("opaque");
      var newImage = $(this).index();
      $("#fade img").eq(newImage).addClass("opaque");
  
      $("#fadetxt h2").removeClass("opaque");
      var newText = $(this).index();
      $("#fadetxt h2").eq(newText).addClass("opaque");
  
      $("#fadetxt p").removeClass("opaque");
      var newText = $(this).index();
      $("#fadetxt p").eq(newText).addClass("opaque");
  
      $("#fade_controls a").removeClass("hvr-glow-selected");
      $(this).addClass("hvr-glow-selected");
  
    });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#fadebox {
      margin: 0 auto;
      text-align:center;
      z-index: 1;
  }
  
  img.fade_arrows {
      width: 30px;
      position: relative;
      margin-bottom: 150px;
      margin-right: 10px;
      margin-left: 10px;
      opacity: 0.3;
      cursor: pointer;
  }
  
  img.fade_arrows:hover {
      opacity: 0.6;
  }
  
  p#fade_controls {
    text-align:center;
    z-index: 1;
  }
  #fade_controls a {
  /*  margin: .4em;*/
      padding: .7em;
      cursor: pointer;
      background: #e1e1e1;
      text-decoration: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      color: #666;
      width: 80px;
  }
  #fade_controls a.hvr-glow-selected {
    background: none;
  }
  
  #fade_controls a.hvr-glow {
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: background;
    transition-property: background;
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  }
  
  #fade_controls a.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
    background: none;
  }
  
  
  #fade {
    position:relative;
    height:340px;
    width:500px;
    margin:0 auto 10px;
    display: inline-block;
  }
  #fade img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity:0;
    width:500px;
    height:340px;
    -webkit-box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
    -moz-box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
    box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
  }
  #fade img.opaque {
    opacity:1;
    width:500px;
    height:340px;
    -webkit-box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
    -moz-box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
    box-shadow: 0px 1px 30px 0px rgba(176,176,176,1);
  }
  
  #fadetxt {
    position:relative;
    height:340px;
    width:300px;
    margin:0 15px 0 0;
    display: inline-block;
  }
  #fadetxt h2 {
    position:absolute;
    left:0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity:0;
    font-size: 28px;
    font-weight: 300; 
    color: #333;
    text-align:left;
  }
  #fadetxt h2.opaque {
    opacity:1;
    font-size: 28px;
    font-weight: 300; 
    color: #333;
    text-align:left;
  }
  #fadetxt p {
    position:absolute;
    left:0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity:0;
    padding-top: 40px;
    text-align:left;
    font-size: 16px;
  }
  #fadetxt p.opaque {
    opacity:1;
    paddin-top: 40px;
    text-align:left;
      font-size: 16px;
  }
  </code></pre>