Carousel

jQuery carousel plugin

by Krzysztof Safjanowski

HTML

<div class="wrapper">

  <div class="carousel">
    <div class="inner">
      <div class="slide active">
        <h1>1</h1>
      </div>
      <div class="slide">
        <h1>2</h1>
      </div>
      <div class="slide">
        <h1>3</h1>
      </div>
    </div>
    <div class="arrow arrow-left"></div>
    <div class="arrow arrow-right"></div>
  </div>

</div>

CSS

html,
body {
  background: #eee;
  width: 100%;
}

.wrapper {
  width: 90%;
  position: relative;
  margin: 5% auto 0;
}


/**
 * Padding is set relative to the width
 * of the element, so here padding-top:60% is
 * a percentage of the width. This allows us 
 * to set the height as a ratio of the width
 *
 */

.carousel {
  width: 100%;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/**
 * ==========================
 * Animation styles
 * 
 * Notes:
 * 1. We use z-index to position active slides in-front 
 * of non-active slides
 * 2. We set right:0 and left:0 on .slide to provide us with
 * a default positioning on both sides of the slide. This allows 
 * us to trigger JS and CSS3 animations easily
 *
 */

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
}

.slide.active,
.slide.left,
.slide.right {
  z-index: 2;
  opacity: 1;
}


/**
 * ==========================
 * JS animation styles
 * 
 * We use jQuery.animate to control the sliding animations
 * when CSS3 animations are not available. In order for
 * the next slide to slide in from the right, we need
 * to change the left:0 property of the slide to left:auto
 *
 */

.js-reset-left {
  left: auto
}


/**
 * ==========================
 * CSS animation styles
 * 
 * .slide.left and .slide.right set-up
 * the to-be-animated slide so that it can slide
 * into view. For example, a slide that is about 
 * to slide in from the right will:
 * 1. Be positioned to the right of the viewport (right:-100%)
 * 2. Slide in when the style is superseded with a more specific style (right:0%)
 *
 */

.slide.left {
  left: -100%;
  right: 0;
}

.slide.right {
  right: -100%;
  left: auto;
}

.transition .slide.left {
  left: 0%
}

.transition .slide.right {
  right: 0%
}


/**
 * The following classes slide the previously active
 * slide out of view...

JavaScript

(function($) {

  function Carousel(element, settings) {
    this.defaults = {
      slideDuration: '3000',
      speed: 500,
      arrowRight: '.arrow-right',
      arrowLeft: '.arrow-left'
    };

    this.settings = $.extend({}, this, this.defaults, settings);

    this.initials = {
      currSlide: 0,
      $currSlide: null,
      totalSlides: false
    };

    $.extend(this, this.initials);

    this.$el = $(element);

    this.changeSlide = $.proxy(this.changeSlide, this);

    this.init();
  }

  Carousel.prototype.init = function() {
    this.build();
    this.events();
    this.activate();
    this.initTimer();
  };

  Carousel.prototype.addCSSDuration = function() {
    var _ = this;
    this.$el.find('.slide').each(function() {
      this.style['transitionDuration'] = _.settings.speed + 'ms';
    });
  }

  Carousel.prototype.removeCSSDuration = function() {
    var _ = this;
    this.$el.find('.slide').each(function() {
      this.style['transitionDuration'] = '';
    });
  }

  Carousel.prototype.build = function() {
    var $indicators = this.$el.append('<ul class="indicators" >').find('.indicators');
    this.totalSlides = this.$el.find('.slide').length;
    for (var i = 0; i < this.totalSlides; i++) $indicators.append('<li data-index=' + i + '>');
  };

  Carousel.prototype.activate = function() {
    this.$currSlide = this.$el.find('.slide').eq(0);
    this.$el.find('.indicators li').eq(0).addClass('active');
  };

  Carousel.prototype.events = function() {
    $('body')
      .on('click', this.settings.arrowRight, {
        direction: 'right'
      }, this.changeSlide)
      .on('click', this.settings.arrowLeft, {
        direction: 'left'
      }, this.changeSlide)
      .on('click', '.indicators li', this.changeSlide);
  };

  Carousel.prototype.clearTimer = function() {
    if (this.timer) clearInterval(this.timer);
  };

  Carousel.prototype.initTimer = function() {
    this.timer = setInterval(this.changeSlide,...