Carousel with javascript

gistfile1.html

<!-- Carousel --> 
<div id="carousel" class="feature autorotate slidelinks group"> 

  <!-- Slides --> 
  <div class="carousel-slides"> 
    <div class="slide"> 
      <a href="/bundles/greatest-need/"><img src="//www.gfamedia.org/images/bundles-slide/greatest-need.jpg" alt=""></a> 
    </div> 

    <div class="slide"> 
      <a href="/ministries/water/"><img src="//www.gfamedia.org/images/home/provide-clean-pure-water.jpg" alt="Provide Clean Water"></a> 
    </div> 
    
    <div class="slide"> 
      <a href="/bundles/gifts-of-compassion/"><img src="//www.gfamedia.org/images/bundles-slide/gifts-of-compassion.jpg" alt=""></a> 
    </div> 

    <div class="slide"> 
      <a href="/bundles/equipping-missionaries/"><img src="//www.gfamedia.org/images/bundles-slide/equipping-missionaries.jpg" alt=""></a> 
    </div> 
  </div> 

  <!-- Carousel Initialization --> 
  <script type="text/javascript"> 
      $("#carousel").carousel();
  </script> 
</div> 
<!-- End Carousel -->

<script type="text/javascript">
    (function ($) {
        $.fn.carousel = function (options) {

            // Default options
            var defaults = {
                fadeDuration: 1000,
                rotateTime: 6000
            };
            options = options || {};

            var options = $.extend({}, defaults, options);

            return this.each(function () {
                var $el = $(this);
                var $slides = $el.find(".slide");

                if (!$el.find(".carousel-links").length) {
                    $el.append('<div class="carousel-links group"><a href="#" class="prev">Previous</a><a href="#" class="next">Next</a></div>');
                }

                // Controls
                var $next = $el.find(".next");
                var $prev = $el.find(".prev");
                var $links = $el.find(".carousel-links");
                var $first = $slides.eq(0);
                var $last = $slides.eq(-1);
                var $current = null;

                // Slide initialization
                $slides.hide();
                $first.show();
                $el.current = $first;

                $slides.each(function (index) {
                    $(this).attr("data-position", index);
                });

                // Next/Previous functions
                var nextSlide = function () {
                    var $slide = $el.current.next();
                    if (!$slide.length) $slide = $first;
                    $el.trigger("showslide", [$slide]);
                }

                var previousSlide = function () {
                    var $slide = $el.current.prev();
                    if (!$slide.length) $slide = $last;
                    $el.trigger("showslide", [$slide]);
                }

                var showSlide = function (e, $slide) {
                    // Do nothing if the new slide is the visible one
                    if ($slide.attr("data-position") == $el.current.attr("data-position")) {
                        return;
                    }

                    $slide.fadeIn(options.fadeDuration);
                    $el.current.fadeOut(options.fadeDuration);
                    $el.trigger("slidechanged", {
                        next: $slide,
                        previous: $el.current
                    });
                    $el.current = $slide;
                }

                $el.bind("nextslide", nextSlide);
                $el.bind("previousslide", previousSlide);
                $el.bind("showslide", showSlide);

                // Next/Previous click listeners
                $next.click(function () {
                    $el.trigger("nextslide");
                    return false;
                });

                $prev.click(function () {
                    $el.trigger("previousslide");
                    return false;
                });

                // Link display settings
                if ($el.hasClass("slidelinks")) {

                    // Generate unique ids
                    $slides.each(function () {
                        if ($(this).attr("id") === "") {
                          $(this).attr("id", $el.attr("id") + "-slide-" + $(this).attr("data-position"));
                        }
                    });

                    // Generate links
                    var html = '<ul class="slide-links">';
                    var n = 1;
                    $slides.each(function () {
                        html += '<li><a href="#' + $(this).attr("id") + '" data-position="' + (n - 1) + '">' + n + '</a></li>'
                        n += 1;
                    });
                    html += "</ul>";
                    $links.append(html);

                    // Add click listener to links
                    $links.find(".slide-links a").click(function (e) {
                        $slide = $slides.eq($(this).attr("data-position"));
                        $el.trigger("showslide", [$slide]);
                        return false;
                    });
                    
                    // Update active link class when slide is changed
                    $el.bind("showslide", function (e, $slide) {
                        $(".slide-links li").removeClass("active");
                        $link = $links.find("[data-position=" + $slide.attr("data-position") + "]");
                        $link.parent().addClass("active");
                    });

                    $el.trigger("showslide", [$first]);

                }

                // Autorotate settings
                if ($el.hasClass("autorotate")) {

                    // Set up interval
                    var interval = setInterval(function () {
                        $el.trigger("nextslide");
                    }, options.rotateTime);

                    // Turn off autorotate if user clicks control links
                    $links.find("a").click(function () {
                        clearInterval(interval);
                    });
                }

            });
        };
    }(jQuery));
</script>

<style type="text/css">
  .feature {
    padding: 0;
    position: relative;
    width: 342px; 
  }

  .carousel-slides {
    height: 206px;
    position: relative;
  }

  .carousel-slides .slide {
    display: block;
    margin: 0;
    height: 100%;
    padding: 0;
    position: absolute;
    width: 100%;
  }

  .carousel-links {
    float: left;
    padding: 10px 0;
    position: relative;
    width: 100%;
  }

  .slide-links {
    clear: left;
    float: left;
    left: 50%;
    margin: 0;
    position: relative;
  }

  .slide-links li {
    display: block;
    float: left;
    margin-right: 5px;
    position: relative;
    right: 50%;
  }

  .slide-links a {
    background: #1e1e1e;
    border: 2px solid #1e1e1e;
    color: #037ad5;
    display: block;
    font-size: 20px;
    padding: 1px 6px;
    text-decoration: none;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.1);
  }

  .slide-links .active a {
    background: #e7e7e7;
    color: #000;
    border: 2px solid #037ad5;
  }

  .carousel-links .prev {
    background: url(//www.gfamedia.org/images/carousel/carousel-prev.png) no-repeat;
    display: block;
    height: 1px;
    left: 0;
    overflow: hidden;
    padding-top: 39px;
    position: absolute;
    width: 43px;
    z-index: 3;
  }

  .carousel-links .next {
    background: url(//www.gfamedia.org/images/carousel/carousel-next.png) no-repeat;
    display: block;
    height: 1px;
    overflow: hidden;
    padding-top: 39px;
    position: absolute;
    right: 0;
    width: 43px;
    z-index: 3;
  }

  .carousel-links .prev:hover, .carousel-links .next:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
  }
</style>