This is a simple jQuery carousel plugin. In this context, I'm using it to illustrate how to write a jQuery plugin.

carousel.js

/***
* Copyright (c) 2013 Benjamin Zalasky
* Released under the MIT license - http://opensource.org/licenses/MIT
***/

(function ($) {
  $.carousel = function (el, options) {
    var defaults = {
      itemSel: 'li',
      height: 540,
      width: 960,
      nextSlideSel: '.next',
      prevSlideSel: '.prev',
      duration: 'default',
      easing: 'swing',
      nextCallback: function () {},
      prevCallback: function () {}
    };

    var plugin = this;

    plugin.settings = {};

    var init = function () {
      plugin.settings = $.extend({}, defaults, options);

      plugin.el = el;

      $(plugin.el + ' > ' + plugin.settings.itemSel + ':gt(0)').hide();

      $(plugin.settings.nextSlideSel).off('click').on('click', function (e) {
        e.preventDefault();
        nextSlide();
        plugin.settings.nextCallback();
      });

      $(plugin.settings.prevSlideSel).off('click').on('click', function (e) {
        e.preventDefault();
        prevSlide();
        plugin.settings.prevCallback();
      });
    };

    var nextSlide = function () {
      $(plugin.el +' > ' + plugin.settings.itemSel + ':first')
        .fadeOut({duration: plugin.settings.duration, easing: plugin.settings.easing})
        .next()
          .fadeIn({duration: plugin.settings.duration, easing: plugin.settings.easing})
          .end()
        .appendTo(plugin.el);
    };

    var prevSlide = function () {
      $(plugin.el + ' > ' + plugin.settings.itemSel + ':last')
        .prependTo(plugin.el);

      $(plugin.el + ' > ' + plugin.settings.itemSel + ':nth-child(2)')
        .fadeOut({duration: plugin.settings.duration, easing: plugin.settings.easing})
        .prev()
          .fadeIn({duration: plugin.settings.duration, easing: plugin.settings.easing});
    };

    init();
  };
})(jQuery);

main.js

// new $.carousel([el], [options])

var carousel = new $.carousel('#carousel ul', {height: 438, width: 700});

markup.html

<section id="carousel">
  <ul>
    <li>
      <img src="img/one.jpg" alt="First Image" />
    </li>
    <li>
      <img src="img/two.jpg" alt="Second Image" />
    </li>
    <li>
      <img src="img/three.jpg" alt="3rd Image" />
    </li>
  </ul>
  <nav>
    <a class="next" href="#" title="Next Slide"></a> 
    <a class="prev" href="#" title="Previous Slide"></a>      
  </nav>    
</section>

styles.scss

/* ==========================================================================
   Carousel.js styles
   ========================================================================== */

  #carousel {position:relative;}
  #carousel ul {position:relative;height:438px;width:700px;list-style:none;margin:0;padding:0;}
  #carousel li {position:absolute;top:0;left:0;}
  #carousel li img {width:100%;}

  /*
   * Fancy CSS arrows via css-tricks.com
   */

  #carousel nav a {position:absolute;height:0;width:0;top:50%;margin-top:-22px;border-top:22px solid transparent;border-bottom:22px solid transparent;}
  #carousel nav a.next {right:5px;border-left-color:#efefef;border-left:22px solid rgba(255,255,255,0.4);}
  #carousel nav a.prev {left:5px;border-right-color:#efefef;border-right:22px solid rgba(255,255,255,0.4);}