/* * glide.js * ver: 1.0.4 * simple & efficient jquery slider * autor: @jedrzejchalubek * url: http://jedrzejchalubek.com * licensed under the mit license */ /* * * autor qietu.com,inc. * url: http://www.qietu.com * autor: @qietuwang * 解决状态栏(点点)在iphone下多几个点点问题 2015.10.20 */ ;(function ($, window, document, undefined) { var name = 'glide', defaults = { // {int or bool} false for turning off autoplay autoplay: 4000, /** * animation time * !!! important !!! * that option will be use only, when css3 are not suported * if css3 are supported animation time is set in css declaration inside .css file * @type {int} */ animationtime: 500, /** * {bool or string} show/hide/appendto arrows * true for append arrows to slider wrapper * false for not appending arrows * id or class name (e.g. '.class-name') for appending to specific html markup */ arrows: true, // {string} arrows wrapper class arrowswrapperclass: 'slider-arrows', // {string} main class for both arrows arrowmainclass: 'slider-arrow', // {string} right arrow arrowrightclass: 'slider-arrow--right', // {string} right arrow text arrowrighttext: 'next', // {string} left arrow arrowleftclass: 'slider-arrow--left', // {string} left arrow text arrowlefttext: 'prev', /** * {bool or string} show/hide/appendto bullets navigation * true for append arrows to slider wrapper * false for not appending arrows * id or class name (e.g. '.class-name') for appending to specific html markup */ nav: true, // {bool} center bullet navigation navcenter: true, // {string} navigation class navclass: 'slider-nav', // {string} navigation item class navitemclass: 'slider-nav__item', // {string} current navigation item class navcurrentitemclass: 'slider-nav__item--current', // {int or bool} touch settings touchdistance: 60, slidecurrentitemclass: 'slide__item--current' }; /** * slider constructor * @param {object} parent * @param {object} options */ function glide(parent, options) { var _ = this; _.options = $.extend({}, defaults, options); // sidebar _.parent = parent; // slides wrapper _.wrapper = _.parent.children(); // slides _.slides = _.wrapper.children(); // current slide id _.currentslide = 0; // css3 animation support _.css3support = true; // initialize _.init(); // build dom _.build(); // start autoplay _.play(); /** * controller * touch events */ if (_.options.touchdistance) { // init swipe _.swipe(); } /** * controller * keyboard left and right arrow keys */ $(document).on('keyup', function(k) { // next if (k.keycode === 39) _.slide(1); // prev if (k.keycode === 37) _.slide(-1); }); /** * controller * mouse over slider * when mouse is over slider, pause autoplay * on out, start autoplay again */ _.parent.add(_.arrows).add(_.nav).on('mouseover mouseout', function (e) { // pasue autoplay _.pause(); // when mouse left slider or touch end, start autoplay anew if (e.type === 'mouseout') _.play(); }); /** * controller * when resize browser window * pause autoplay in fear of escalation * reinit plugin for new slider dimensions * correct crop to current slide * start autoplay from beginning */ $(window).on('resize', function() { // reinit plugin (set new slider dimensions) _.init(); // crop to current slide _.slide(0); }); /** * returning api */ return { current: function() { return -(_.currentslide) + 1; }, play: function() { _.play(); }, pause: function() { _.pause(); }, next: function(callback) { _.slide(1, false, callback); }, prev: function(callback) { _.slide(-1, false, callback); }, jump: function(distance, callback) { _.slide(distance-1, true, callback); }, nav: function(target) { /** * if navigation wrapper already exist * remove it, protection before doubled navigation */ if (_.navwrapper) { _.navwrapper.remove(); } _.options.nav = (target) ? target : _.options.nav; // build _.navigation(); }, arrows: function(target) { /** * if arrows wrapper already exist * remove it, protection before doubled arrows */ if (_.arrowswrapper) { _.arrowswrapper.remove(); } _.options.arrows = (target) ? target : _.options.arrows; // build _.arrows(); } }; } /** * building slider dom */ glide.prototype.build = function() { var _ = this; /** * arrows * if option is true and there is more than one slide * append left and right arrow */ if (_.options.arrows) _.arrows(); /** * navigation * if option is true and there is more than one slide * append navigation item for each slide */ if (_.options.nav) _.navigation(); }; /** * building navigation dom */ glide.prototype.navigation = function() { var _ = this; if (_.slides.length > 1) { // cache var o = _.options, /** * setting append target * if option is true set default target, that is slider wrapper * else get target set in options * @type {bool or string} */ target = (_.options.nav === true) ? _.parent : _.options.nav; // navigation wrapper _.navwrapper = $('