/** * koslider - KOslider is a jQuery slider/carousel plugin that uses CSS3 transitions for its animation * @version v0.5.0 * @link https://github.com/mrmartineau/KOslider * @license MIT */ /** * debounce * @param {integer} milliseconds This param indicates the number of milliseconds * to wait after the last call before calling the original function . * @return {function} This returns a function that when called will wait the * indicated number of milliseconds after the last call before * calling the original function. */ Function.prototype.debounce = function (milliseconds) { var baseFunction = this, timer = null, wait = milliseconds; return function () { var self = this, args = arguments; function complete() { baseFunction.apply(self, args); timer = null; } if (timer) { clearTimeout(timer); } timer = setTimeout(complete, wait); }; }; /** * KOslider by @mrmartineau * * See https://github.com/mrmartineau/KOslider for documentation and demos */ (function($, f) { var KOslider = function() { // Object clone var _ = this; // Set some default options _.options = { keys : false, dots : true, dotsClick : false, arrows : true, sliderEl : '.KOslider', slide : '.KOslider-slide', uiPosition : 'before', customPrevBtnClass : undefined, customNextBtnClass : undefined, debug : false, setHeight : "auto", autoplay : false, autoplayInterval : 4000, swipe : false, itemWidth : undefined, inactiveClass : 'KOslider--inactive', activeClass : 'KOslider--active', callbacks : {} }; _.init = function(el, options) { // Check whether we're passing any options in to KOslider _.options = $.extend(_.options, options); _.el = el; // .KOsliderContainer _.slider = el.find(_.options.sliderEl); _.slide = _.slider.find(_.options.slide); if (_.options.debug) { console.log('KOslider ::\n\tOptions:\n\t\t', _.options); } // If fewer than 2 children do not setup KOslider if ( _.slide.length < 2) { el.addClass(_.options.inactiveClass); if (_.options.debug) { console.log('KOslider :: not enough elements to make a slider', options); } return; } // el.addClass(_.options.activeClass); // Cached vars var options = _.options; var slide = _.slide; var len = slide.length; // Set up some other vars _.leftOffset = 0; _.index = 0; // Current index _.min = 0; _.count = len - 1; // Resize: Check and change sizes if needed $(window).resize($.proxy(_.getWidth.debounce(500), this)).trigger('resize'); _.el.on('click', '.KOslider-UI-btn', function(event) { event.preventDefault(); var fn = $(this).data('fn'); // Choose next or prev _[fn](); }); // Keypresses if (options.keys) { _.keypresses(); } // Clickable dots if (options.dotsClick) { _.dotsClick(); } // Autoplay if (options.autoplay) { _.autoplay(); } // Autoplay if (options.swipe) { _.swipe(); } return _; }; $.fn.KOslider.destroy = function() { _.slider.css('width', 'auto').data({KOslider: undefined, key: undefined}); _.slider.find('.KOslider-UI').remove(); _.slide.css('width', 'auto'); }; /** * Go to slide * @return {integer} Go to slide * Value should be zero-indexed number for particular e.g. 0, 1, 2 etc */ _.goto = function(x) { if (_.tooThin) { _.leftOffset = 0; _.reachedEnd = false; } else if (_.leftOffset < _.max || -(x * _.itemWidth) < _.max) { _.leftOffset = _.max; _.reachedEnd = true; if (_.options.debug) { console.log('KOslider :: reachedEnd = true'); } } else { _.leftOffset = -(x * _.itemWidth); _.reachedEnd = false; } _.index = x; _.setHeight(x); _.slider.css('transform', 'translateX(' + _.leftOffset + 'px)'); if (_.options.debug) { console.log('KOslider ::\n\t_.goto() :: \n\t\tx', x, '\n\t\tleftOffset:', _.leftOffset, '\n\t\tindex', _.index, '\n\t\titemWidth:', _.itemWidth, '\n\t\tmove amount:', _.leftOffset / _.index); } _.navState(); if (_.options.callbacks.onChange !== undefined) { eval(_.options.callbacks.onChange); } }; /** * Move to next item */ _.next = function() { var moveTo; if (_.index < _.count) { moveTo = _.index + 1; } else { moveTo = _.count; return; } _.goto(moveTo); }; /** * Move to previous item */ _.prev = function() { var moveTo; if (_.index > 0) { moveTo = _.index - 1; } else { moveTo = 0; return; } _.goto(moveTo); }; /** * Change nav state */ _.navState = function() { var atStart; var atEnd; // Enable/Disable the prev btn if (_.index === 0) { atStart = true; } else { atStart = false; } // Enable/Disable the next btn. if (_.index === _.count || _.reachedEnd) { atEnd = true; } else { atEnd = false; } _.el.find('.KOslider-UI-btn--previous').prop('disabled', atStart); _.el.find('.KOslider-UI-btn--next').prop('disabled', atEnd); // Set first dot to be active _.el.find('.KOslider-UI-dot').eq(_.index).addClass('is-active').siblings().removeClass('is-active'); }; /** * Get size of .slider and then run _.setSizes() */ _.getWidth = function() { _.itemWidth = parseInt(_.options.itemWidth) > 0 ? parseInt(_.options.itemWidth) : _.el.width(); _.setSize(_.itemWidth); }; /** * Set sizes for element */ _.setSize = function(itemWidth) { var $containerWidth = _.el.width(); // Container width var $sliderWidth = _.slide.length * itemWidth; // full width of slider with all items floated _.max = Math.round(-($sliderWidth - $containerWidth)); _.leftOffset = -(itemWidth * _.index); _.slider.css({ width : Math.round($sliderWidth), transform: 'translateX(' + _.leftOffset + 'px)' }); _.slide.css({ width: itemWidth }); _.setHeight(_.index); // Create UI if there is enough space to do so if ($sliderWidth > $containerWidth) { // Create UI - Dots and next/prev buttons if (_.el.find('.KOslider-UI').length === 0) { _.createUI(); _.tooThin = false; } } else { _.el.find('.KOslider-UI').remove(); _.tooThin = true; if (_.leftOffset !== 0) { _.leftOffset = 0; _.goto(0); } } if (_.options.debug) { console.log('KOslider ::\n\t_.setSize() :: \n\t\t_.max:', _.max , '\n\t\t_.min:', _.min, '\n\t\tleftOffset:', _.leftOffset, '\n\t\tindex', _.index, '\n\t\titemWidth:', _.itemWidth, '\n\t\t_.slide.length', _.slide.length, '\n\t\t$sliderWidth', $sliderWidth); } }; /** * Set height of