/** * unslider by @idiot and @damirfoy * contributors: * - @shamox * */ (function($, f) { var unslider = function() { // object clone var _ = this; // set some options _.o = { speed: 500, // animation speed, false for no transition (integer or boolean) delay: 5000, // delay between slides, false for no autoplay (integer or boolean) init: 0, // init delay, false for no delay (integer or boolean) pause: !f, // pause on hover (boolean) loop: !f, // infinitely looping (boolean) keys: f, // keyboard shortcuts (boolean) dots: f, // display dots pagination (boolean) arrows: f, // display prev/next arrows (boolean) prev: '←', // text or html inside prev button (string) next: '→', // same as for prev option fluid: f, // is it a percentage width? (boolean) starting: f, // invoke before animation (function with argument) complete: f, // invoke after animation (function with argument) items: '>ul', // slides container selector item: '>li', // slidable items selector easing: 'swing',// easing function to use for animation autoplay: true // enable autoplay on initialisation }; _.init = function(el, o) { // check whether we're passing any options in to unslider _.o = $.extend(_.o, o); _.el = el; _.ul = el.find(_.o.items); _.max = [el.outerwidth() | 0, el.outerheight() | 0]; _.li = _.ul.find(_.o.item).each(function(index) { var me = $(this), width = me.outerwidth(), height = me.outerheight(); // set the max values if (width > _.max[0]) _.max[0] = width; if (height > _.max[1]) _.max[1] = height; }); // cached vars var o = _.o, ul = _.ul, li = _.li, len = li.length; // current indeed _.i = 0; // set the main element el.css({width: _.max[0], height: li.first().outerheight(), overflow: 'hidden'}); // set the relative widths ul.css({position: 'relative', left: 0, width: (len * 100) + '%'}); if(o.fluid) { li.css({'float': 'left', width: (100 / len) + '%'}); } else { li.css({'float': 'left', width: (_.max[0]) + 'px'}); } // autoslide o.autoplay && settimeout(function() { if (o.delay | 0) { _.play(); if (o.pause) { el.on('mouseover mouseout', function(e) { _.stop(); e.type == 'mouseout' && _.play(); }); }; }; }, o.init | 0); // keypresses if (o.keys) { $(document).keydown(function(e) { var key = e.which; if (key == 37) _.prev(); // left else if (key == 39) _.next(); // right else if (key == 27) _.stop(); // esc }); }; // dot pagination o.dots && nav('dot'); // arrows support o.arrows && nav('arrow'); // patch for fluid-width sliders. screw those guys. if (o.fluid) { $(window).resize(function() { _.r && cleartimeout(_.r); _.r = settimeout(function() { var styl = {height: li.eq(_.i).outerheight()}, width = el.outerwidth(); ul.css(styl); styl['width'] = math.min(math.round((width / el.parent().width()) * 100), 100) + '%'; el.css(styl); li.css({ width: width + 'px' }); }, 50); }).resize(); }; // move support if ($.event.special['move'] || $.event('move')) { el.on('movestart', function(e) { if ((e.distx > e.disty && e.distx < -e.disty) || (e.distx < e.disty && e.distx > -e.disty)) { e.preventdefault(); }else{ el.data("left", _.ul.offset().left / el.width() * 100); } }).on('move', function(e) { var left = 100 * e.distx / el.width(); var leftdelta = 100 * e.deltax / el.width(); _.ul[0].style.left = parseint(_.ul[0].style.left.replace("%", ""))+leftdelta+"%"; _.ul.data("left", left); }).on('moveend', function(e) { var left = _.ul.data("left"); if (math.abs(left) > 30){ var i = left > 0 ? _.i-1 : _.i+1; if (i < 0 || i >= len) i = _.i; _.to(i); }else{ _.to(_.i); } }); }; return _; }; // move unslider to a slide index _.to = function(index, callback) { if (_.t) { _.stop(); _.play(); } var o = _.o, el = _.el, ul = _.ul, li = _.li, current = _.i, target = li.eq(index); $.isfunction(o.starting) && !callback && o.starting(el, li.eq(current), index); // to slide or not to slide if ((!target.length || index < 0) && o.loop == f) return; // check if it's out of bounds if (!target.length) index = 0; if (index < 0) index = li.length - 1; target = li.eq(index); var speed = callback ? 5 : o.speed | 0, easing = o.easing, obj = {height: target.outerheight()}; if (!ul.queue('fx').length) { // handle those pesky dots el.find('.dot').eq(index).addclass('active').siblings().removeclass('active'); el.animate(obj, speed, easing) && ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, easing, function(data) { _.i = index; $.isfunction(o.complete) && !callback && o.complete(index, el, target); }); }; }; // autoplay functionality _.play = function() { _.t = setinterval(function() { _.to(_.i + 1); }, _.o.delay | 0); }; // stop autoplay _.stop = function() { _.t = clearinterval(_.t); return _; }; // move to previous/next slide _.next = function() { return _.stop().to(_.i + 1); }; _.prev = function() { return _.stop().to(_.i - 1); }; // create dots and arrows function nav(name, html) { if (name == 'dot') { html = '
    '; $.each(_.li, function(index) { html += '
  1. ' + ++index + '
  2. '; }); html += '
'; } else { html = '
' + html + name + ' prev">' + _.o.prev + '
' + html + name + ' next">' + _.o.next + ''; }; _.el.addclass('has-' + name + 's').append(html).find('.' + name).click(function() { var me = $(this); me.hasclass('dot') ? _.stop().to(me.index()) : me.hasclass('prev') ? _.prev() : _.next(); }); }; }; // create a jquery plugin $.fn.unslider = function(o) { var len = this.length; // enable multiple-slider support return this.each(function(index) { // cache a copy of $(this), so it var me = $(this), key = 'unslider' + (len > 1 ? '-' + ++index : ''), instance = (new unslider).init(me, o); // invoke an unslider instance me.data(key, instance).data('key', key); }); }; unslider.version = "1.0.0"; })(jquery, false);