image slider

slider.js

(function (window, $) {
 
var Slider = function (items, interval) {
  var self = this;
 
  self.items = items;
  self.interval = interval;
  self.current = 0;
  self.buttons = $('<div class="slider-buttons" style="position:absolute; right: 0; bottom: 0;">');
  self.prevBtn = $('<a href="#">prev</a>');
  self.nextBtn = $('<a href="#">next</a>');
 
  self.prevBtn.click(function (e) {
    e.preventDefault();
    self.prev();
  });
 
  self.nextBtn.click(function (e) {
    e.preventDefault();
    self.next();
  });
 
  self.buttons.append(self.prevBtn).append(self.nextBtn);
  $(items[items.length-1]).after(self.buttons);
 
  self.timeoutID = window.setTimeout(function () {
    self.next();
  }, self.interval);
};
 
Slider.prototype.show = function () {
  var self = this, fadeOutCompleteCount = 0, len = self.items.length;
 
  self.items.fadeOut('slow', function () {
    fadeOutCompleteCount++;
    if (fadeOutCompleteCount === len) {
      $(self.items[Number(self.current)]).fadeIn(1000, function () {
        if (typeof self.timeoutID === 'number') {
          window.clearTimeout(self.timeoutID);
          delete self.timeoutID;
        }
        self.timeoutID = window.setTimeout(function () {
          self.next();
        }, self.interval);
      });
    }
  });
};
 
Slider.prototype.prev = function () {
  var self = this, len = self.items.length;
 
  self.current-=1;
  if (self.current < 0) {
    self.current = (len - 1);
  }
 
  self.show();
};
 
Slider.prototype.next = function () {
  var self = this, len = self.items.length;
 
  self.current+=1;
  if (self.current > (len-1)) {
    self.current = 0;
  }
 
  self.show();
};
 
$.fn.slider = function (options) {
  var interval = options.interval || 10*1000;
 
  new Slider($(this), interval);
};
 
})(window, jQuery);
 
jQuery(document).ready(function ($) {
  $('.frontpage-promo-item').slider({ interval: 10*1000});
});