UNPKG

yl-bud

Version:

一览科技前端开发工具

1,364 lines (1,269 loc) 114 kB
/* * Swiper 2.7.6 * Mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/sliders/swiper/ * * Copyright 2010-2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under GPL & MIT * * Released on: February 11, 2015 */ var Swiper = function (selector, params) { 'use strict'; /*========================= A little bit dirty but required part for IE8 and old FF support ===========================*/ if (!document.body.outerHTML && document.body.__defineGetter__) { if (HTMLElement) { var element = HTMLElement.prototype; if (element.__defineGetter__) { element.__defineGetter__('outerHTML', function () { return new XMLSerializer().serializeToString(this); }); } } } if (!window.getComputedStyle) { window.getComputedStyle = function (el, pseudo) { this.el = el; this.getPropertyValue = function (prop) { var re = /(\-([a-z]){1})/g; if (prop === 'float') prop = 'styleFloat'; if (re.test(prop)) { prop = prop.replace(re, function () { return arguments[2].toUpperCase(); }); } return el.currentStyle[prop] ? el.currentStyle[prop] : null; }; return this; }; } if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (obj, start) { for (var i = (start || 0), j = this.length; i < j; i++) { if (this[i] === obj) { return i; } } return -1; }; } if (!document.querySelectorAll) { if (!window.jQuery) return; } function $$(selector, context) { if (document.querySelectorAll) return (context || document).querySelectorAll(selector); else return jQuery(selector, context); } /*========================= Check for correct selector ===========================*/ if (typeof selector === 'undefined') return; if (!(selector.nodeType)) { if ($$(selector).length === 0) return; } /*========================= _this ===========================*/ var _this = this; /*========================= Default Flags and vars ===========================*/ _this.touches = { start: 0, startX: 0, startY: 0, current: 0, currentX: 0, currentY: 0, diff: 0, abs: 0 }; _this.positions = { start: 0, abs: 0, diff: 0, current: 0 }; _this.times = { start: 0, end: 0 }; _this.id = (new Date()).getTime(); _this.container = (selector.nodeType) ? selector : $$(selector)[0]; _this.isTouched = false; _this.isMoved = false; _this.activeIndex = 0; _this.centerIndex = 0; _this.activeLoaderIndex = 0; _this.activeLoopIndex = 0; _this.previousIndex = null; _this.velocity = 0; _this.snapGrid = []; _this.slidesGrid = []; _this.imagesToLoad = []; _this.imagesLoaded = 0; _this.wrapperLeft = 0; _this.wrapperRight = 0; _this.wrapperTop = 0; _this.wrapperBottom = 0; _this.isAndroid = navigator.userAgent.toLowerCase().indexOf('android') >= 0; var wrapper, slideSize, wrapperSize, direction, isScrolling, containerSize; /*========================= Default Parameters ===========================*/ var defaults = { eventTarget: 'wrapper', // or 'container' mode : 'horizontal', // or 'vertical' touchRatio : 1, speed : 300, freeMode : false, freeModeFluid : false, momentumRatio: 1, momentumBounce: true, momentumBounceRatio: 1, slidesPerView : 1, slidesPerGroup : 1, slidesPerViewFit: true, //Fit to slide when spv "auto" and slides larger than container simulateTouch : true, followFinger : true, shortSwipes : true, longSwipesRatio: 0.5, moveStartThreshold: false, onlyExternal : false, createPagination : true, pagination : false, paginationElement: 'span', paginationClickable: false, paginationAsRange: true, resistance : true, // or false or 100% scrollContainer : false, preventLinks : true, preventLinksPropagation: false, noSwiping : false, // or class noSwipingClass : 'swiper-no-swiping', //:) initialSlide: 0, keyboardControl: false, mousewheelControl : false, mousewheelControlForceToAxis : false, useCSS3Transforms : true, // Autoplay autoplay: false, autoplayDisableOnInteraction: true, autoplayStopOnLast: false, //Loop mode loop: false, loopAdditionalSlides: 0, // Round length values roundLengths: false, //Auto Height calculateHeight: false, //Apply CSS for width and/or height cssWidthAndHeight: false, // or true or 'width' or 'height' //Images Preloader updateOnImagesReady : true, //Form elements releaseFormElements : true, //Watch for active slide, useful when use effects on different slide states watchActiveIndex: false, //Slides Visibility Fit visibilityFullFit : false, //Slides Offset offsetPxBefore : 0, offsetPxAfter : 0, offsetSlidesBefore : 0, offsetSlidesAfter : 0, centeredSlides: false, //Queue callbacks queueStartCallbacks : false, queueEndCallbacks : false, //Auto Resize autoResize : true, resizeReInit : false, //DOMAnimation DOMAnimation : true, //Slides Loader loader: { slides: [], //array with slides slidesHTMLType: 'inner', // or 'outer' surroundGroups: 1, //keep preloaded slides groups around view logic: 'reload', //or 'change' loadAllSlides: false }, // One way swipes swipeToPrev: true, swipeToNext: true, //Namespace slideElement: 'div', slideClass: 'swiper-slide', slideActiveClass: 'swiper-slide-active', slideVisibleClass: 'swiper-slide-visible', slideDuplicateClass: 'swiper-slide-duplicate', wrapperClass: 'swiper-wrapper', paginationElementClass: 'swiper-pagination-switch', paginationActiveClass: 'swiper-active-switch', paginationVisibleClass: 'swiper-visible-switch' }; params = params || {}; for (var prop in defaults) { if (prop in params && typeof params[prop] === 'object') { for (var subProp in defaults[prop]) { if (! (subProp in params[prop])) { params[prop][subProp] = defaults[prop][subProp]; } } } else if (! (prop in params)) { params[prop] = defaults[prop]; } } _this.params = params; if (params.scrollContainer) { params.freeMode = true; params.freeModeFluid = true; } if (params.loop) { params.resistance = '100%'; } var isH = params.mode === 'horizontal'; /*========================= Define Touch Events ===========================*/ var desktopEvents = ['mousedown', 'mousemove', 'mouseup']; if (_this.browser.ie10) desktopEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp']; if (_this.browser.ie11) desktopEvents = ['pointerdown', 'pointermove', 'pointerup']; _this.touchEvents = { touchStart : _this.support.touch || !params.simulateTouch ? 'touchstart' : desktopEvents[0], touchMove : _this.support.touch || !params.simulateTouch ? 'touchmove' : desktopEvents[1], touchEnd : _this.support.touch || !params.simulateTouch ? 'touchend' : desktopEvents[2] }; /*========================= Wrapper ===========================*/ for (var i = _this.container.childNodes.length - 1; i >= 0; i--) { if (_this.container.childNodes[i].className) { var _wrapperClasses = _this.container.childNodes[i].className.split(/\s+/); for (var j = 0; j < _wrapperClasses.length; j++) { if (_wrapperClasses[j] === params.wrapperClass) { wrapper = _this.container.childNodes[i]; } } } } _this.wrapper = wrapper; /*========================= Slide API ===========================*/ _this._extendSwiperSlide = function (el) { el.append = function () { if (params.loop) { el.insertAfter(_this.slides.length - _this.loopedSlides); } else { _this.wrapper.appendChild(el); _this.reInit(); } return el; }; el.prepend = function () { if (params.loop) { _this.wrapper.insertBefore(el, _this.slides[_this.loopedSlides]); _this.removeLoopedSlides(); _this.calcSlides(); _this.createLoop(); } else { _this.wrapper.insertBefore(el, _this.wrapper.firstChild); } _this.reInit(); return el; }; el.insertAfter = function (index) { if (typeof index === 'undefined') return false; var beforeSlide; if (params.loop) { beforeSlide = _this.slides[index + 1 + _this.loopedSlides]; if (beforeSlide) { _this.wrapper.insertBefore(el, beforeSlide); } else { _this.wrapper.appendChild(el); } _this.removeLoopedSlides(); _this.calcSlides(); _this.createLoop(); } else { beforeSlide = _this.slides[index + 1]; _this.wrapper.insertBefore(el, beforeSlide); } _this.reInit(); return el; }; el.clone = function () { return _this._extendSwiperSlide(el.cloneNode(true)); }; el.remove = function () { _this.wrapper.removeChild(el); _this.reInit(); }; el.html = function (html) { if (typeof html === 'undefined') { return el.innerHTML; } else { el.innerHTML = html; return el; } }; el.index = function () { var index; for (var i = _this.slides.length - 1; i >= 0; i--) { if (el === _this.slides[i]) index = i; } return index; }; el.isActive = function () { if (el.index() === _this.activeIndex) return true; else return false; }; if (!el.swiperSlideDataStorage) el.swiperSlideDataStorage = {}; el.getData = function (name) { return el.swiperSlideDataStorage[name]; }; el.setData = function (name, value) { el.swiperSlideDataStorage[name] = value; return el; }; el.data = function (name, value) { if (typeof value === 'undefined') { return el.getAttribute('data-' + name); } else { el.setAttribute('data-' + name, value); return el; } }; el.getWidth = function (outer, round) { return _this.h.getWidth(el, outer, round); }; el.getHeight = function (outer, round) { return _this.h.getHeight(el, outer, round); }; el.getOffset = function () { return _this.h.getOffset(el); }; return el; }; //Calculate information about number of slides _this.calcSlides = function (forceCalcSlides) { var oldNumber = _this.slides ? _this.slides.length : false; _this.slides = []; _this.displaySlides = []; for (var i = 0; i < _this.wrapper.childNodes.length; i++) { if (_this.wrapper.childNodes[i].className) { var _className = _this.wrapper.childNodes[i].className; var _slideClasses = _className.split(/\s+/); for (var j = 0; j < _slideClasses.length; j++) { if (_slideClasses[j] === params.slideClass) { _this.slides.push(_this.wrapper.childNodes[i]); } } } } for (i = _this.slides.length - 1; i >= 0; i--) { _this._extendSwiperSlide(_this.slides[i]); } if (oldNumber === false) return; if (oldNumber !== _this.slides.length || forceCalcSlides) { // Number of slides has been changed removeSlideEvents(); addSlideEvents(); _this.updateActiveSlide(); if (_this.params.pagination) _this.createPagination(); _this.callPlugins('numberOfSlidesChanged'); } }; //Create Slide _this.createSlide = function (html, slideClassList, el) { slideClassList = slideClassList || _this.params.slideClass; el = el || params.slideElement; var newSlide = document.createElement(el); newSlide.innerHTML = html || ''; newSlide.className = slideClassList; return _this._extendSwiperSlide(newSlide); }; //Append Slide _this.appendSlide = function (html, slideClassList, el) { if (!html) return; if (html.nodeType) { return _this._extendSwiperSlide(html).append(); } else { return _this.createSlide(html, slideClassList, el).append(); } }; _this.prependSlide = function (html, slideClassList, el) { if (!html) return; if (html.nodeType) { return _this._extendSwiperSlide(html).prepend(); } else { return _this.createSlide(html, slideClassList, el).prepend(); } }; _this.insertSlideAfter = function (index, html, slideClassList, el) { if (typeof index === 'undefined') return false; if (html.nodeType) { return _this._extendSwiperSlide(html).insertAfter(index); } else { return _this.createSlide(html, slideClassList, el).insertAfter(index); } }; _this.removeSlide = function (index) { if (_this.slides[index]) { if (params.loop) { if (!_this.slides[index + _this.loopedSlides]) return false; _this.slides[index + _this.loopedSlides].remove(); _this.removeLoopedSlides(); _this.calcSlides(); _this.createLoop(); } else _this.slides[index].remove(); return true; } else return false; }; _this.removeLastSlide = function () { if (_this.slides.length > 0) { if (params.loop) { _this.slides[_this.slides.length - 1 - _this.loopedSlides].remove(); _this.removeLoopedSlides(); _this.calcSlides(); _this.createLoop(); } else _this.slides[_this.slides.length - 1].remove(); return true; } else { return false; } }; _this.removeAllSlides = function () { var num = _this.slides.length; for (var i = _this.slides.length - 1; i >= 0; i--) { _this.slides[i].remove(); if (i === num - 1) { _this.setWrapperTranslate(0); } } }; _this.getSlide = function (index) { return _this.slides[index]; }; _this.getLastSlide = function () { return _this.slides[_this.slides.length - 1]; }; _this.getFirstSlide = function () { return _this.slides[0]; }; //Currently Active Slide _this.activeSlide = function () { return _this.slides[_this.activeIndex]; }; /*========================= Wrapper for Callbacks : Allows additive callbacks via function arrays ===========================*/ _this.fireCallback = function () { var callback = arguments[0]; if (Object.prototype.toString.call(callback) === '[object Array]') { for (var i = 0; i < callback.length; i++) { if (typeof callback[i] === 'function') { callback[i](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } } } else if (Object.prototype.toString.call(callback) === '[object String]') { if (params['on' + callback]) _this.fireCallback(params['on' + callback], arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } else { callback(arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); } }; function isArray(obj) { if (Object.prototype.toString.apply(obj) === '[object Array]') return true; return false; } /** * Allows user to add callbacks, rather than replace them * @param callback * @param func * @return {*} */ _this.addCallback = function (callback, func) { var _this = this, tempFunc; if (_this.params['on' + callback]) { if (isArray(this.params['on' + callback])) { return this.params['on' + callback].push(func); } else if (typeof this.params['on' + callback] === 'function') { tempFunc = this.params['on' + callback]; this.params['on' + callback] = []; this.params['on' + callback].push(tempFunc); return this.params['on' + callback].push(func); } } else { this.params['on' + callback] = []; return this.params['on' + callback].push(func); } }; _this.removeCallbacks = function (callback) { if (_this.params['on' + callback]) { _this.params['on' + callback] = null; } }; /*========================= Plugins API ===========================*/ var _plugins = []; for (var plugin in _this.plugins) { if (params[plugin]) { var p = _this.plugins[plugin](_this, params[plugin]); if (p) _plugins.push(p); } } _this.callPlugins = function (method, args) { if (!args) args = {}; for (var i = 0; i < _plugins.length; i++) { if (method in _plugins[i]) { _plugins[i][method](args); } } }; /*========================= Windows Phone 8 Fix ===========================*/ if ((_this.browser.ie10 || _this.browser.ie11) && !params.onlyExternal) { _this.wrapper.classList.add('swiper-wp8-' + (isH ? 'horizontal' : 'vertical')); } /*========================= Free Mode Class ===========================*/ if (params.freeMode) { _this.container.className += ' swiper-free-mode'; } /*================================================== Init/Re-init/Resize Fix ====================================================*/ _this.initialized = false; _this.init = function (force, forceCalcSlides) { var _width = _this.h.getWidth(_this.container, false, params.roundLengths); var _height = _this.h.getHeight(_this.container, false, params.roundLengths); if (_width === _this.width && _height === _this.height && !force) return; _this.width = _width; _this.height = _height; var slideWidth, slideHeight, slideMaxHeight, wrapperWidth, wrapperHeight, slideLeft; var i; // loop index variable to avoid JSHint W004 / W038 containerSize = isH ? _width : _height; var wrapper = _this.wrapper; if (force) { _this.calcSlides(forceCalcSlides); } if (params.slidesPerView === 'auto') { //Auto mode var slidesWidth = 0; var slidesHeight = 0; //Unset Styles if (params.slidesOffset > 0) { wrapper.style.paddingLeft = ''; wrapper.style.paddingRight = ''; wrapper.style.paddingTop = ''; wrapper.style.paddingBottom = ''; } wrapper.style.width = ''; wrapper.style.height = ''; if (params.offsetPxBefore > 0) { if (isH) _this.wrapperLeft = params.offsetPxBefore; else _this.wrapperTop = params.offsetPxBefore; } if (params.offsetPxAfter > 0) { if (isH) _this.wrapperRight = params.offsetPxAfter; else _this.wrapperBottom = params.offsetPxAfter; } if (params.centeredSlides) { if (isH) { _this.wrapperLeft = (containerSize - this.slides[0].getWidth(true, params.roundLengths)) / 2; _this.wrapperRight = (containerSize - _this.slides[_this.slides.length - 1].getWidth(true, params.roundLengths)) / 2; } else { _this.wrapperTop = (containerSize - _this.slides[0].getHeight(true, params.roundLengths)) / 2; _this.wrapperBottom = (containerSize - _this.slides[_this.slides.length - 1].getHeight(true, params.roundLengths)) / 2; } } if (isH) { if (_this.wrapperLeft >= 0) wrapper.style.paddingLeft = _this.wrapperLeft + 'px'; if (_this.wrapperRight >= 0) wrapper.style.paddingRight = _this.wrapperRight + 'px'; } else { if (_this.wrapperTop >= 0) wrapper.style.paddingTop = _this.wrapperTop + 'px'; if (_this.wrapperBottom >= 0) wrapper.style.paddingBottom = _this.wrapperBottom + 'px'; } slideLeft = 0; var centeredSlideLeft = 0; _this.snapGrid = []; _this.slidesGrid = []; slideMaxHeight = 0; for (i = 0; i < _this.slides.length; i++) { slideWidth = _this.slides[i].getWidth(true, params.roundLengths); slideHeight = _this.slides[i].getHeight(true, params.roundLengths); if (params.calculateHeight) { slideMaxHeight = Math.max(slideMaxHeight, slideHeight); } var _slideSize = isH ? slideWidth : slideHeight; if (params.centeredSlides) { var nextSlideWidth = i === _this.slides.length - 1 ? 0 : _this.slides[i + 1].getWidth(true, params.roundLengths); var nextSlideHeight = i === _this.slides.length - 1 ? 0 : _this.slides[i + 1].getHeight(true, params.roundLengths); var nextSlideSize = isH ? nextSlideWidth : nextSlideHeight; if (_slideSize > containerSize) { if (params.slidesPerViewFit) { _this.snapGrid.push(slideLeft + _this.wrapperLeft); _this.snapGrid.push(slideLeft + _slideSize - containerSize + _this.wrapperLeft); } else { for (var j = 0; j <= Math.floor(_slideSize / (containerSize + _this.wrapperLeft)); j++) { if (j === 0) _this.snapGrid.push(slideLeft + _this.wrapperLeft); else _this.snapGrid.push(slideLeft + _this.wrapperLeft + containerSize * j); } } _this.slidesGrid.push(slideLeft + _this.wrapperLeft); } else { _this.snapGrid.push(centeredSlideLeft); _this.slidesGrid.push(centeredSlideLeft); } centeredSlideLeft += _slideSize / 2 + nextSlideSize / 2; } else { if (_slideSize > containerSize) { if (params.slidesPerViewFit) { _this.snapGrid.push(slideLeft); _this.snapGrid.push(slideLeft + _slideSize - containerSize); } else { if (containerSize !== 0) { for (var k = 0; k <= Math.floor(_slideSize / containerSize); k++) { _this.snapGrid.push(slideLeft + containerSize * k); } } else { _this.snapGrid.push(slideLeft); } } } else { _this.snapGrid.push(slideLeft); } _this.slidesGrid.push(slideLeft); } slideLeft += _slideSize; slidesWidth += slideWidth; slidesHeight += slideHeight; } if (params.calculateHeight) _this.height = slideMaxHeight; if (isH) { wrapperSize = slidesWidth + _this.wrapperRight + _this.wrapperLeft; if (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'height') { wrapper.style.width = (slidesWidth) + 'px'; } if (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'width') { wrapper.style.height = (_this.height) + 'px'; } } else { if (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'height') { wrapper.style.width = (_this.width) + 'px'; } if (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'width') { wrapper.style.height = (slidesHeight) + 'px'; } wrapperSize = slidesHeight + _this.wrapperTop + _this.wrapperBottom; } } else if (params.scrollContainer) { //Scroll Container wrapper.style.width = ''; wrapper.style.height = ''; wrapperWidth = _this.slides[0].getWidth(true, params.roundLengths); wrapperHeight = _this.slides[0].getHeight(true, params.roundLengths); wrapperSize = isH ? wrapperWidth : wrapperHeight; wrapper.style.width = wrapperWidth + 'px'; wrapper.style.height = wrapperHeight + 'px'; slideSize = isH ? wrapperWidth : wrapperHeight; } else { //For usual slides if (params.calculateHeight) { slideMaxHeight = 0; wrapperHeight = 0; //ResetWrapperSize if (!isH) _this.container.style.height = ''; wrapper.style.height = ''; for (i = 0; i < _this.slides.length; i++) { //ResetSlideSize _this.slides[i].style.height = ''; slideMaxHeight = Math.max(_this.slides[i].getHeight(true), slideMaxHeight); if (!isH) wrapperHeight += _this.slides[i].getHeight(true); } slideHeight = slideMaxHeight; _this.height = slideHeight; if (isH) wrapperHeight = slideHeight; else { containerSize = slideHeight; _this.container.style.height = containerSize + 'px'; } } else { slideHeight = isH ? _this.height : _this.height / params.slidesPerView; if (params.roundLengths) slideHeight = Math.ceil(slideHeight); wrapperHeight = isH ? _this.height : _this.slides.length * slideHeight; } slideWidth = isH ? _this.width / params.slidesPerView : _this.width; if (params.roundLengths) slideWidth = Math.ceil(slideWidth); wrapperWidth = isH ? _this.slides.length * slideWidth : _this.width; slideSize = isH ? slideWidth : slideHeight; if (params.offsetSlidesBefore > 0) { if (isH) _this.wrapperLeft = slideSize * params.offsetSlidesBefore; else _this.wrapperTop = slideSize * params.offsetSlidesBefore; } if (params.offsetSlidesAfter > 0) { if (isH) _this.wrapperRight = slideSize * params.offsetSlidesAfter; else _this.wrapperBottom = slideSize * params.offsetSlidesAfter; } if (params.offsetPxBefore > 0) { if (isH) _this.wrapperLeft = params.offsetPxBefore; else _this.wrapperTop = params.offsetPxBefore; } if (params.offsetPxAfter > 0) { if (isH) _this.wrapperRight = params.offsetPxAfter; else _this.wrapperBottom = params.offsetPxAfter; } if (params.centeredSlides) { if (isH) { _this.wrapperLeft = (containerSize - slideSize) / 2; _this.wrapperRight = (containerSize - slideSize) / 2; } else { _this.wrapperTop = (containerSize - slideSize) / 2; _this.wrapperBottom = (containerSize - slideSize) / 2; } } if (isH) { if (_this.wrapperLeft > 0) wrapper.style.paddingLeft = _this.wrapperLeft + 'px'; if (_this.wrapperRight > 0) wrapper.style.paddingRight = _this.wrapperRight + 'px'; } else { if (_this.wrapperTop > 0) wrapper.style.paddingTop = _this.wrapperTop + 'px'; if (_this.wrapperBottom > 0) wrapper.style.paddingBottom = _this.wrapperBottom + 'px'; } wrapperSize = isH ? wrapperWidth + _this.wrapperRight + _this.wrapperLeft : wrapperHeight + _this.wrapperTop + _this.wrapperBottom; if (parseFloat(wrapperWidth) > 0 && (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'height')) { wrapper.style.width = wrapperWidth + 'px'; } if (parseFloat(wrapperHeight) > 0 && (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'width')) { wrapper.style.height = wrapperHeight + 'px'; } slideLeft = 0; _this.snapGrid = []; _this.slidesGrid = []; for (i = 0; i < _this.slides.length; i++) { _this.snapGrid.push(slideLeft); _this.slidesGrid.push(slideLeft); slideLeft += slideSize; if (parseFloat(slideWidth) > 0 && (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'height')) { _this.slides[i].style.width = slideWidth + 'px'; } if (parseFloat(slideHeight) > 0 && (!params.cssWidthAndHeight || params.cssWidthAndHeight === 'width')) { _this.slides[i].style.height = slideHeight + 'px'; } } } if (!_this.initialized) { _this.callPlugins('onFirstInit'); if (params.onFirstInit) _this.fireCallback(params.onFirstInit, _this); } else { _this.callPlugins('onInit'); if (params.onInit) _this.fireCallback(params.onInit, _this); } _this.initialized = true; }; _this.reInit = function (forceCalcSlides) { _this.init(true, forceCalcSlides); }; _this.resizeFix = function (reInit) { _this.callPlugins('beforeResizeFix'); _this.init(params.resizeReInit || reInit); // swipe to active slide in fixed mode if (!params.freeMode) { _this.swipeTo((params.loop ? _this.activeLoopIndex : _this.activeIndex), 0, false); // Fix autoplay if (params.autoplay) { if (_this.support.transitions && typeof autoplayTimeoutId !== 'undefined') { if (typeof autoplayTimeoutId !== 'undefined') { clearTimeout(autoplayTimeoutId); autoplayTimeoutId = undefined; _this.startAutoplay(); } } else { if (typeof autoplayIntervalId !== 'undefined') { clearInterval(autoplayIntervalId); autoplayIntervalId = undefined; _this.startAutoplay(); } } } } // move wrapper to the beginning in free mode else if (_this.getWrapperTranslate() < -maxWrapperPosition()) { _this.setWrapperTransition(0); _this.setWrapperTranslate(-maxWrapperPosition()); } _this.callPlugins('afterResizeFix'); }; /*========================================== Max and Min Positions ============================================*/ function maxWrapperPosition() { var a = (wrapperSize - containerSize); if (params.freeMode) { a = wrapperSize - containerSize; } // if (params.loop) a -= containerSize; if (params.slidesPerView > _this.slides.length && !params.centeredSlides) { a = 0; } if (a < 0) a = 0; return a; } /*========================================== Event Listeners ============================================*/ function initEvents() { var bind = _this.h.addEventListener; var eventTarget = params.eventTarget === 'wrapper' ? _this.wrapper : _this.container; //Touch Events if (! (_this.browser.ie10 || _this.browser.ie11)) { if (_this.support.touch) { bind(eventTarget, 'touchstart', onTouchStart); bind(eventTarget, 'touchmove', onTouchMove); bind(eventTarget, 'touchend', onTouchEnd); } if (params.simulateTouch) { bind(eventTarget, 'mousedown', onTouchStart); bind(document, 'mousemove', onTouchMove); bind(document, 'mouseup', onTouchEnd); } } else { bind(eventTarget, _this.touchEvents.touchStart, onTouchStart); bind(document, _this.touchEvents.touchMove, onTouchMove); bind(document, _this.touchEvents.touchEnd, onTouchEnd); } //Resize Event if (params.autoResize) { bind(window, 'resize', _this.resizeFix); } //Slide Events addSlideEvents(); //Mousewheel _this._wheelEvent = false; if (params.mousewheelControl) { if (document.onmousewheel !== undefined) { _this._wheelEvent = 'mousewheel'; } if (!_this._wheelEvent) { try { new WheelEvent('wheel'); _this._wheelEvent = 'wheel'; } catch (e) {} } if (!_this._wheelEvent) { _this._wheelEvent = 'DOMMouseScroll'; } if (_this._wheelEvent) { bind(_this.container, _this._wheelEvent, handleMousewheel); } } //Keyboard function _loadImage(img) { var image, src; var onReady = function () { if (typeof _this === 'undefined' || _this === null) return; if (_this.imagesLoaded !== undefined) _this.imagesLoaded++; if (_this.imagesLoaded === _this.imagesToLoad.length) { _this.reInit(); if (params.onImagesReady) _this.fireCallback(params.onImagesReady, _this); } }; if (!img.complete) { src = (img.currentSrc || img.getAttribute('src')); if (src) { image = new Image(); image.onload = onReady; image.onerror = onReady; image.src = src; } else { onReady(); } } else {//image already loaded... onReady(); } } if (params.keyboardControl) { bind(document, 'keydown', handleKeyboardKeys); } if (params.updateOnImagesReady) { _this.imagesToLoad = $$('img', _this.container); for (var i = 0; i < _this.imagesToLoad.length; i++) { _loadImage(_this.imagesToLoad[i]); } } } //Remove Event Listeners _this.destroy = function (removeStyles) { var unbind = _this.h.removeEventListener; var eventTarget = params.eventTarget === 'wrapper' ? _this.wrapper : _this.container; //Touch Events if (! (_this.browser.ie10 || _this.browser.ie11)) { if (_this.support.touch) { unbind(eventTarget, 'touchstart', onTouchStart); unbind(eventTarget, 'touchmove', onTouchMove); unbind(eventTarget, 'touchend', onTouchEnd); } if (params.simulateTouch) { unbind(eventTarget, 'mousedown', onTouchStart); unbind(document, 'mousemove', onTouchMove); unbind(document, 'mouseup', onTouchEnd); } } else { unbind(eventTarget, _this.touchEvents.touchStart, onTouchStart); unbind(document, _this.touchEvents.touchMove, onTouchMove); unbind(document, _this.touchEvents.touchEnd, onTouchEnd); } //Resize Event if (params.autoResize) { unbind(window, 'resize', _this.resizeFix); } //Init Slide Events removeSlideEvents(); //Pagination if (params.paginationClickable) { removePaginationEvents(); } //Mousewheel if (params.mousewheelControl && _this._wheelEvent) { unbind(_this.container, _this._wheelEvent, handleMousewheel); } //Keyboard if (params.keyboardControl) { unbind(document, 'keydown', handleKeyboardKeys); } //Stop autoplay if (params.autoplay) { _this.stopAutoplay(); } // Remove styles if (removeStyles) { _this.wrapper.removeAttribute('style'); for (var i = 0; i < _this.slides.length; i++) { _this.slides[i].removeAttribute('style'); } } // Plugins _this.callPlugins('onDestroy'); // Check jQuery/Zepto data if (window.jQuery && window.jQuery(_this.container).data('swiper')) { window.jQuery(_this.container).removeData('swiper'); } if (window.Zepto && window.Zepto(_this.container).data('swiper')) { window.Zepto(_this.container).removeData('swiper'); } //Destroy variable _this = null; }; function addSlideEvents() { var bind = _this.h.addEventListener, i; //Prevent Links Events if (params.preventLinks) { var links = $$('a', _this.container); for (i = 0; i < links.length; i++) { bind(links[i], 'click', preventClick); } } //Release Form Elements if (params.releaseFormElements) { var formElements = $$('input, textarea, select', _this.container); for (i = 0; i < formElements.length; i++) { bind(formElements[i], _this.touchEvents.touchStart, releaseForms, true); if (_this.support.touch && params.simulateTouch) { bind(formElements[i], 'mousedown', releaseForms, true); } } } //Slide Clicks & Touches if (params.onSlideClick) { for (i = 0; i < _this.slides.length; i++) { bind(_this.slides[i], 'click', slideClick); } } if (params.onSlideTouch) { for (i = 0; i < _this.slides.length; i++) { bind(_this.slides[i], _this.touchEvents.touchStart, slideTouch); } } } function removeSlideEvents() { var unbind = _this.h.removeEventListener, i; //Slide Clicks & Touches if (params.onSlideClick) { for (i = 0; i < _this.slides.length; i++) { unbind(_this.slides[i], 'click', slideClick); } } if (params.onSlideTouch) { for (i = 0; i < _this.slides.length; i++) { unbind(_this.slides[i], _this.touchEvents.touchStart, slideTouch); } } //Release Form Elements if (params.releaseFormElements) { var formElements = $$('input, textarea, select', _this.container); for (i = 0; i < formElements.length; i++) { unbind(formElements[i], _this.touchEvents.touchStart, releaseForms, true); if (_this.support.touch && params.simulateTouch) { unbind(formElements[i], 'mousedown', releaseForms, true); } } } //Prevent Links Events if (params.preventLinks) { var links = $$('a', _this.container); for (i = 0; i < links.length; i++) { unbind(links[i], 'click', preventClick); } } } /*========================================== Keyboard Control ============================================*/ function handleKeyboardKeys(e) { var kc = e.keyCode || e.charCode; if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return; if (kc === 37 || kc === 39 || kc === 38 || kc === 40) { var inView = false; //Check that swiper should be inside of visible area of window var swiperOffset = _this.h.getOffset(_this.container); var scrollLeft = _this.h.windowScroll().left; var scrollTop = _this.h.windowScroll().top; var windowWidth = _this.h.windowWidth(); var windowHeight = _this.h.windowHeight(); var swiperCoord = [ [swiperOffset.left, swiperOffset.top], [swiperOffset.left + _this.width, swiperOffset.top], [swiperOffset.left, swiperOffset.top + _this.height], [swiperOffset.left + _this.width, swiperOffset.top + _this.height] ]; for (var i = 0; i < swiperCoord.length; i++) { var point = swiperCoord[i]; if ( point[0] >= scrollLeft && point[0] <= scrollLeft + windowWidth && point[1] >= scrollTop && point[1] <= scrollTop + windowHeight ) { inView = true; } } if (!inView) return; } if (isH) { if (kc === 37 || kc === 39) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (kc === 39) _this.swipeNext(); if (kc === 37) _this.swipePrev(); } else { if (kc === 38 || kc === 40) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } if (kc === 40) _this.swipeNext(); if (kc === 38) _this.swipePrev(); } } _this.disableKeyboardControl = function () { params.keyboardControl = false; _this.h.removeEventListener(document, 'keydown', handleKeyboardKeys); }; _this.enableKeyboardControl = function () { params.keyboardControl = true; _this.h.addEventListener(document, 'keydown', handleKeyboardKeys); }; /*========================================== Mousewheel Control ============================================*/ var lastScrollTime = (new Date()).getTime(); function handleMousewheel(e) { var we = _this._wheelEvent; var delta = 0; //Opera & IE if (e.detail) delta = -e.detail; //WebKits else if (we === 'mousewheel') { if (params.mousewheelControlForceToAxis) { if (isH) { if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) delta = e.wheelDeltaX; else return; } else { if (Math.abs(e.wheelDeltaY) > Math.abs(e.wheelDeltaX)) delta = e.wheelDeltaY; else return; } } else { delta = e.wheelDelta; } } //Old FireFox else if (we === 'DOMMouseScroll') delta = -e.detail; //New FireFox else if (we === 'wheel') { if (params.mousewheelControlForceToAxis) { if (isH) { if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) delta = -e.deltaX; else return; } else { if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) delta = -e.deltaY; else return; } } else { delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? - e.deltaX : - e.deltaY; } } if (!params.freeMode) { if ((new Date()).getTime() - lastScrollTime > 60) { if (delta < 0) _this.swipeNext(); else _this.swipePrev(); } lastScrollTime = (new Date()).getTime(); } else { //Freemode or scrollContainer: var position = _this.getWrapperTranslate() + delta; if (position > 0) position = 0; if (position < -maxWrapperPosition()) position = -maxWrapperPosition(); _this.setWrapperTransition(0); _this.setWrapperTranslate(position); _this.updateActiveSlide(position); // Return page scroll on edge positions if (position === 0 || position === -maxWrapperPosition()) return; } if (params.autoplay) _this.stopAutoplay(true); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; return false; } _this.disableMousewheelControl = function () { if (!_this._wheelEvent) return false; params.mousewheelControl = false; _this.h.removeEventListener(_this.container, _this._wheelEvent, handleMousewheel); return true; }; _this.enableMousewheelControl = function () { if (!_this._wheelEvent) return false; params.mousewheelControl = true; _this.h.addEventListener(_this.container, _this._wheelEvent, handleMousewheel); return true; }; /*========================= Grab Cursor ===========================*/ if (params.grabCursor) { var containerStyle = _this.container.style; containerStyle.cursor = 'move'; containerStyle.cursor = 'grab'; containerStyle.cursor = '-moz-grab'; containerStyle.cursor = '-webkit-grab'; } /*========================= Slides Events Handlers ===========================*/ _this.allowSlideClick = true; function slideClick(event) { if (_this.allowSlideClick) { setClickedSlide(event); _this.fireCallback(params.onSlideClick, _this, event); } } function slideTouch(event) { setClickedSlide(event); _this.fireCallback(params.onSlideTouch, _this, event); } function setClickedSlide(event) { // IE 6-8 support if (!event.currentTarget) { var element = event.srcElement; do { if (element.className.indexOf(params.slideClass) > -1) { break; } element = element.parentNode; } while (element); _this.clickedSlide = element; } else { _this.clickedSlide = event.currentTarget; } _this.clickedSlideIndex = _this.slides.indexOf(_this.clickedSlide); _this.clickedSlideLoopIndex = _this.clickedSlideIndex - (_this.loopedSlides || 0); } _this.allowLinks = true; function preventClick(e) { if (!_this.allowLinks) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (params.preventLinksPropagation && 'stopPropagation' in e) { e.stopPropagation(); } return false; } } function releaseForms(e) { if (e.stopPropagation) e.stopPropagation(); else e.returnValue = false; return false; } /*================================================== Event Handlers ====================================================*/ var isTouchEvent = false; var allowThresholdMove; var allowMomentumBounce = true; function onTouchStart(event) { if (params.preventLinks) _this.allowLinks = true; //Exit if slider is already was touched if (_this.isTouched || params.onlyExternal) { return false; } // Blur active elements var eventTarget = event.target || event.srcElement; if (document.activeElement && document.activeElement !== document.body) { if (document.activeElement !== eventTarget) document.activeElement.blur(); }