/** * Unslider by @idiot */ (function($, f) { // If there's no jQuery, Unslider can't work, so kill the operation. if(!$) return f; var Unslider = function() { // Set up our elements this.el = f; this.items = f; // Dimensions this.sizes = []; this.max = [0,0]; // Current inded this.current = 0; // Start/stop timer this.interval = f; // Set some options this.opts = { speed: 500, delay: 5000, // f for no autoplay complete: f, // when a slide's finished keys: !f, // keyboard shortcuts - disable if it breaks things dots: f, // display ••••o• pagination fluid: f // is it a percentage width?, }; // Create a deep clone for methods where context changes var _ = this; this.init = function(el, opts) { this.el = el; this.ul = el.children('ul'); this.max = [el.outerWidth(), el.outerHeight()]; this.items = this.ul.children('li').each(this.calculate); // Check whether we're passing any options in to Unslider this.opts = $.extend(this.opts, opts); // Set up the Unslider this.setup(); return this; }; // Get the width for an element // Pass a jQuery element as the context with .call(), and the index as a parameter: Unslider.calculate.call($('li').first(), 0) this.calculate = function(index) { var me = $(this), width = me.outerWidth(), height = me.outerHeight(); // Add it to the sizes list _.sizes[index] = [width, height]; // Set the max values if(width > _.max[0]) _.max[0] = width; //t if(height > _.max[1]) _.max[1] = height; }; // Work out what methods need calling this.setup = function() { // Set the main element this.el.css({ overflow: 'hidden', width: _.max[0] //t , //t height: this.items.first().outerHeight() }); // Set the relative widths this.ul.css({width: (this.items.length * 100) + '%', position: 'relative'}); this.items.css('width', (100 / this.items.length) + '%'); if(this.opts.delay !== f) { this.start(); this.el.on('mouseenter', this.stop).on('mouseleave', this.start); } // Custom keyboard support this.opts.keys && $(document).on('keydown', this.keys); // Dot pagination this.opts.dots && this.dots(); // Little patch for fluid-width sliders. Screw those guys. if(this.opts.fluid) { var resize = function() { _.el.css('width', Math.min(Math.round((_.el.outerWidth() / _.el.parent().outerWidth()) * 100), 100) + '%'); }; resize(); $(window).on('resize', resize); } if(this.opts.arrows) { this.el.parent().append('

←→

') .find('.arrows span').on('click', function() { (typeof _[this.className] === "function") && _[this.className](); }); }; // Swipe support if($.event.swipe) { this.el.on('swipeleft', _.prev).on('swiperight', _.next); } }; // Move Unslider to a slide index this.move = function(index, cb) { // If it's out of bounds, go to the first slide if(!this.items.eq(index).length) index = 0; if(index < 0) index = (this.items.length - 1); var target = this.items.eq(index); var obj = {}; //t {height: target.outerHeight()}; var speed = cb ? 5 : this.opts.speed; if(!this.ul.is(':animated')) { // Handle those pesky dots _.el.find('.dot').eq(index).addClass('active').siblings().removeClass('active'); this.el.animate(obj, speed) && this.ul.animate($.extend({left: '-' + index + '00%'}, obj), speed, function(data) { _.current = index; (typeof _.opts.complete === "function") && !cb && _.opts.complete(_.el); }); } }; // Autoplay functionality this.start = function() { _.interval = setInterval(function() { _.move(_.current + 1); }, _.opts.delay); }; // Stop autoplay this.stop = function() { _.interval = clearInterval(_.interval); return _; }; // Keypresses this.keys = function(e) { var key = e.which; var map = { // Prev/next 37: _.prev, 39: _.next, // Esc 27: _.stop }; if((typeof map[key] === "function")) { map[key](); } }; // Arrow navigation this.next = function() { return _.stop().move(_.current + 1) }; this.prev = function() { return _.stop().move(_.current - 1) }; this.dots = function() { // Create the HTML var html = '
    '; $.each(this.items, function(index) { html += '
  1. ' + (index + 1) + '
  2. '; }); html += '
'; // Add it to the Unslider this.el.addClass('has-dots').append(html).find('.dot').on('click', function() { _.move($(this).index()); // Pause Unslider _.stop(); }); }; }; // 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); var instance = (new Unslider).init(me, o); // Invoke an Unslider instance me.data('unslider' + (len > 1 ? '-' + (index + 1) : ''), instance); }); }; })(window.jQuery, false);