如何在我的jQuery图像和文本滑块中添加左/右箭头（下一个/上一个）功能？

Question

Here's what I've got so far: http://jsfiddle.net/bpgabrielli/vpfsnhmh/

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.

Any suggestions or critiques of the current code are welcome. Thanks!

HTML:

<div id="fadebox">
    <img class="fade_arrows" id="left_arrow" src="http://www.clker.com/cliparts/Z/n/k/Z/y/j/left-arrow-gray-hi.png" />
    <div id="fadetxt">
      <h2 class='opaque'>Californian Monk Seal</h2><p class='opaque'>Bacon ipsum dolor amet corned beef drumstick jowl boudin kevin rump bresaola pork belly pig.</p>
      <h2>Leopard Seal</h2><p>Tri-tip hamburger pork belly landjaeger andouille tenderloin. Turkey biltong bacon, filet mignon meatball shankle frankfurter shoulder.</p>
      <h2>New Zealand Fur Seals</h2><p>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.</p>
      <h2>Canadian Baby Seal</h2><p>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.</p>
    </div>
    <div id="fade">
      <img class='opaque' src="http://i.telegraph.co.uk/multimedia/archive/01661/seal_1661793c.jpg" />
      <img src="http://i.telegraph.co.uk/multimedia/archive/01212/seal_1212980c.jpg" />
      <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/fur-seal_531_600x450.jpg" />
      <img src="http://myweb.tiscali.co.uk/ladycroft/seal2.jpg" />
    </div>
    <img class="fade_arrows" id="right_arrow" src="http://guidelinesandprinciples.org/assessment/upload/surveys/117344/images/arrow_right_grey.png" />
</div>  
    <p id="fade_controls">
      <a class="hvr-glow-selected">First Seal</a>
      <a>Second Seal</a>
      <a>Third Seal</a>
      <a>Fourth Seal</a>
    </p>

Javascript:

$(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");

  });
});

CSS:

#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;
}

Answer 1

$(document).ready(function() {
    var count = $(".slides").length;
    $(".slides").click(function(){
        $(this).fadeOut("fast").removeClass("active");
        $(this).next().fadeIn("slow").addClass("active");
        if($(".slides:last")){
            $(".slides:first").fadeIn("slow").addClass("active");
        }
    });
});

You can do it by checking the slide last child if the you have last child then display first child on arrow click. get the slides length and if the length is greater then slide first child will be shown.

Answer 2

Here's the final working Fiddle: http://jsfiddle.net/bpgabrielli/vpfsnhmh/1/

The final arrow script, below:

<!-- Next Arrow Javascript -->
<script type="text/javascript">
$(document).ready(function() {
    $("#right_arrow").click(function(){
        var nextSlide = $('.slidep.opaque, .slidei.opaque').next();
        var nextControl = $('.slidec.hvr-glow-selected').next();
        if($(".slidei.opaque").is($(".slidei:last"))) {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $('.slidep:first, .slidei:first').addClass("opaque");
            $('.slidec:first').addClass("hvr-glow-selected");
        }
        else {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $(nextSlide).addClass("opaque");
            $(nextControl).addClass("hvr-glow-selected");
        }
    });
});
</script>
<!-- Back Arrow Javascript -->
<script type="text/javascript">
$(document).ready(function() {
    $("#left_arrow").click(function(){
        var prevSlide = $('.slidep.opaque, .slidei.opaque').prev();
        var prevControl = $('.slidec.hvr-glow-selected').prev();
        if($(".slidei.opaque").is($(".slidei:first"))) {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $('.slidep:last, .slidei:last').addClass("opaque");
            $('.slidec:last').addClass("hvr-glow-selected");
        }
        else {
            $('.slidep.opaque, .slidei.opaque').removeClass("opaque");
            $('.slidec.hvr-glow-selected').removeClass("hvr-glow-selected");
            $(prevSlide).addClass("opaque");
            $(prevControl).addClass("hvr-glow-selected");
        }
    });
});
</script>