Manila Slider

manila-slider.js

/*!
 * Manila Slider
 * Original author: @amongiants
 * Version: W.I.P
 * Dependencies: jQuery, Velocity
 *
 * Required CSS
 * ============
 * 
 * .manila-slider {
 *   position: relative | absolute | fixed;
 *   width: some val;
 *   height: some val;
 *   overflow: hidden;
 * }
 * .manila-slider .slide {
 *   position: absolute;
 *   width: 100%;
 *   height: 100%;
 * }
 * 
 */

var manilaSlider = function(options) {

  var _ = {
    active : null,
    total : null,
    autoplayTimer : null,
    paused : true
  };

  var self = {

    options : $.extend(true, {}, {
      container : '.manila-slider',
      slide : '.slide',
      speed : 500,
      easing: 'easeInSine',
      autoplay : false,
      delay : 3000,
      rtl: false,
      callbacks : {
        onInit : function() { },
        onBefore : function() { },
        onAfter : function() { }
      }
    }, options),

    init : function() {
      _.total = self.getNumSlides();
      self.setCSS();
      if (self.options.autoplay)
        self.autoplay.play();
      self.options.callbacks.onInit();
    },

    getNumSlides : function() {
      return $(self.options.container).find(self.options.slide).length;
    },

    getActiveSlide : function() {
      return $(self.options.container).find(self.options.slide).filter('.active');
    },

    getNextSlide : function() {
      if (_.active.index() == _.total-1)
        return $(self.options.container).find(self.options.slide).filter(':first-child');
      else 
        return _.active.next();
    },

    getPrevSlide : function() {
      if (_.active.index() == 0)
        return $(self.options.container).find(self.options.slide).filter(':last-child') ;
      else
        return _.active.prev();
    },

    setCSS : function() {
      self.getActiveSlide().velocity({ translateX: '0' }, 0);
      $(self.options.container).find(self.options.slide).filter(':not(.active)').velocity({
        translateX: '100%'
      }, 0);
    },

    animateTo : {

      next : function(callbacks) {
        _.active = self.getActiveSlide();
        var next = self.getNextSlide();

        _.active
          .velocity({ translateX: '0' }, 0)
          .velocity({ translateX: (!self.options.rtl ? '-100%' : '100%') }, { 
            duration: self.options.speed,
            easing: self.options.easing
          });

        next
          .velocity({ translateX: (!self.options.rtl ? '100%' : '-100%') }, {
            duration: 0,
            complete: function(){
              if(callbacks && callbacks.onBefore) 
                callbacks.onBefore();
              else
                self.options.callbacks.onBefore();
              _.active.removeClass('active');
            }
          })
          .velocity({ translateX: '0' }, {
            duration: self.options.speed,
            easing: self.options.easing,
            complete: function() {
              next.addClass('active');
              if(callbacks && callbacks.onAfter) 
                callbacks.onAfter();
              else
                self.options.callbacks.onAfter();
            }
          });

      },

      prev : function(callbacks) {
        _.active = self.getActiveSlide();
        var next = self.getPrevSlide();

        _.active
          .velocity({ translateX: '0' }, 0)
          .velocity({ translateX: (!self.options.rtl ? '100%' : '-100%') }, { 
            duration: self.options.speed,
            easing: self.options.easing
          });

        next
          .velocity({ translateX: (!self.options.rtl ? '-100%' : '100%') }, {
            duration: 0,
            complete: function(){
              if(callbacks && callbacks.onBefore) 
                callbacks.onBefore();
              else
                self.options.callbacks.onBefore();
              _.active.removeClass('active');
            }
          })
          .velocity({ translateX: '0' }, {
            duration: self.options.speed,
            easing: self.options.easing,
            complete: function() {
              next.addClass('active');
              if(callbacks && callbacks.onAfter) 
                callbacks.onAfter();
              else 
                self.options.callbacks.onAfter();
            }
          });
      }

      // add specified function for animating to user specified slide

    },

    autoplay : {

      play : function() {
        if (_.autoplayTimer)
          clearInterval(_.autoplayTimer);
        _.autoplayTimer = setInterval(self.animateTo.next, self.options.delay);
        _.paused = false;
      },

      pause : function() {
        if (_.autoplayTimer)
          clearInterval(_.autoplayTimer);
        _.paused = true;
      },

      isPlaying : function() {
        return (_.autoplayTimer && !_.paused) ? true : false;
      }

    }
      

  };

  self.init();

  return {
    goNext : self.animateTo.next,
    goPrev : self.animateTo.prev,
    current : self.getActiveSlide,
    next : self.getNextSlide,
    prev : self.getPrevSlide,
    update : self.init,
    play : self.autoplay.play,
    pause : self.autoplay.pause,
    playing : self.autoplay.isPlaying
  };

};