├── src ├── js │ ├── wrap-end-umd.js │ ├── wrap-end.js │ ├── wrap-start.js │ ├── swiper-outro.js │ ├── get-jquery.js │ ├── swiper-intro.js │ ├── swiper-intro-f7.js │ ├── amd.js │ ├── get-dom-lib.js │ ├── wrap-start-umd.js │ ├── plugins.js │ ├── hashnav.js │ ├── parallax.js │ ├── dom-plugins.js │ ├── emitter.js │ ├── swiper-proto.js │ ├── a11y.js │ ├── keyboard.js │ ├── init.js │ ├── mousewheel.js │ ├── controller.js │ ├── lazy-load.js │ └── scrollbar.js └── less │ ├── swiper.less │ ├── preloader-f7.less │ ├── mixins.less │ ├── scrollbar.less │ ├── preloader.less │ ├── core.less │ ├── navigation-f7.less │ ├── navigation.less │ └── effects.less ├── .project ├── component.json ├── package.js ├── bower.json ├── LICENSE ├── package.json ├── playground └── index.html ├── demos ├── 36-pagination-fraction.html ├── 37-pagination-progress.html ├── 01-default.html ├── 17-effect-cube.html ├── 35-effect-flip.html ├── 16-effect-fade.html ├── 34-autoheight.html ├── 04-space-between.html ├── 02-responsive.html ├── 03-vertical.html ├── 09-freemode.html ├── 05-slides-per-view.html ├── 13-scrollbar.html ├── 10-slides-per-column.html ├── 07-centered.html ├── 20-mousewheel-control.html ├── 08-centered-auto.html ├── 26-rtl.html ├── 12-grab-cursor.html ├── 06-slides-per-view-auto.html ├── 14-nav-arrows.html ├── 27-jquery.html ├── 15-infinite-loop.html ├── 21-autoplay.html ├── 19-keyboard-control.html ├── 18-effect-coverflow.html ├── 25-hash-navigation.html ├── 29-custom-pagination.html ├── 33-responsive-breakpoints.html ├── 11-nested.html ├── 30-lazy-load-images.html ├── 22-dynamic-slides.html ├── 24-multiple-swipers.html ├── 31-custom-plugin.html ├── 23-thumbs-gallery.html ├── 28-parallax.html ├── 23-thumbs-gallery-loop.html └── 32-scroll-container.html ├── README.md ├── demo.html └── gulpfile.js /src/js/wrap-end-umd.js: -------------------------------------------------------------------------------- 1 | return Swiper; 2 | })); -------------------------------------------------------------------------------- /src/js/wrap-end.js: -------------------------------------------------------------------------------- 1 | window.Swiper = Swiper; 2 | })(); -------------------------------------------------------------------------------- /src/js/wrap-start.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | var $; -------------------------------------------------------------------------------- /src/js/swiper-outro.js: -------------------------------------------------------------------------------- 1 | 2 | // Return swiper instance 3 | return s; 4 | }; 5 | -------------------------------------------------------------------------------- /src/js/get-jquery.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Get jQuery 3 | ===========================*/ 4 | 5 | addLibraryPlugin($); 6 | 7 | var domLib = $; -------------------------------------------------------------------------------- /src/less/swiper.less: -------------------------------------------------------------------------------- 1 | @import url('mixins.less'); 2 | @import url('core.less'); 3 | @import url('navigation.less'); 4 | @import url('effects.less'); 5 | @import url('scrollbar.less'); 6 | @import url('preloader.less'); -------------------------------------------------------------------------------- /src/js/swiper-intro.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Swiper 3 | ===========================*/ 4 | var Swiper = function (container, params) { 5 | if (!(this instanceof Swiper)) return new Swiper(container, params); -------------------------------------------------------------------------------- /src/js/swiper-intro-f7.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Swiper 3 | ===========================*/ 4 | window.Swiper = function (container, params) { 5 | if (!(this instanceof Swiper)) return new Swiper(container, params); -------------------------------------------------------------------------------- /src/less/preloader-f7.less: -------------------------------------------------------------------------------- 1 | /* Preloader */ 2 | .swiper-slide .preloader { 3 | width: 42px; 4 | height: 42px; 5 | position: absolute; 6 | left: 50%; 7 | top: 50%; 8 | margin-left: -21px; 9 | margin-top: -21px; 10 | z-index: 10; 11 | } -------------------------------------------------------------------------------- /src/js/amd.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Swiper AMD Export 3 | ===========================*/ 4 | if (typeof(module) !== 'undefined') 5 | { 6 | module.exports = window.Swiper; 7 | } 8 | else if (typeof define === 'function' && define.amd) { 9 | define([], function () { 10 | 'use strict'; 11 | return window.Swiper; 12 | }); 13 | } -------------------------------------------------------------------------------- /src/less/mixins.less: -------------------------------------------------------------------------------- 1 | .preserve3d() { 2 | -webkit-transform-style: preserve-3d; 3 | -moz-transform-style: preserve-3d; 4 | -ms-transform-style: preserve-3d; 5 | transform-style: preserve-3d; 6 | } 7 | .encoded-svg-background(@svg) { 8 | @url: `encodeURIComponent(@{svg})`; 9 | background-image: url("data:image/svg+xml;charset=utf-8,@{url}"); 10 | } -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | swiper 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | 15 | com.aptana.projects.webnature 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/js/get-dom-lib.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Get Dom libraries 3 | ===========================*/ 4 | var swiperDomPlugins = ['jQuery', 'Zepto', 'Dom7']; 5 | for (var i = 0; i < swiperDomPlugins.length; i++) { 6 | if (window[swiperDomPlugins[i]]) { 7 | addLibraryPlugin(window[swiperDomPlugins[i]]); 8 | } 9 | } 10 | // Required DOM Plugins 11 | var domLib; 12 | if (typeof Dom7 === 'undefined') { 13 | domLib = window.Dom7 || window.Zepto || window.jQuery; 14 | } 15 | else { 16 | domLib = Dom7; 17 | } -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swiper", 3 | "repo": "https://github.com/nolimits4web/Swiper.git", 4 | "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", 5 | "version": "3.3.1", 6 | "keywords": ["swiper", "swipe", "slider", "touch", "ios", "mobile", "cordova", "phonegap", "app", "framework", "carousel", "gallery"], 7 | "dependencies": { 8 | }, 9 | "scripts": [ 10 | "dist/js/swiper.js" 11 | ], 12 | "main": "dist/js/swiper.js", 13 | "styles": [ 14 | "dist/css/swiper.css" 15 | ], 16 | "license": ["MIT"] 17 | } 18 | -------------------------------------------------------------------------------- /src/js/wrap-start-umd.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | 'use strict'; 3 | 4 | if (typeof define === 'function' && define.amd) { 5 | // AMD. Register as an anonymous module. 6 | define(['jquery'], factory); 7 | } else if (typeof exports === 'object') { 8 | // Node. Does not work with strict CommonJS, but 9 | // only CommonJS-like environments that support module.exports, 10 | // like Node. 11 | module.exports = factory(require('jquery')); 12 | } else { 13 | // Browser globals (root is window) 14 | root.Swiper = factory(root.jQuery); 15 | } 16 | }(this, function ($) { 17 | 'use strict'; 18 | -------------------------------------------------------------------------------- /src/js/plugins.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Plugins API. Collect all and init all plugins 3 | ===========================*/ 4 | s._plugins = []; 5 | for (var plugin in s.plugins) { 6 | var p = s.plugins[plugin](s, s.params[plugin]); 7 | if (p) s._plugins.push(p); 8 | } 9 | // Method to call all plugins event/method 10 | s.callPlugins = function (eventName) { 11 | for (var i = 0; i < s._plugins.length; i++) { 12 | if (eventName in s._plugins[i]) { 13 | s._plugins[i][eventName](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); 14 | } 15 | } 16 | }; -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | var version = '3.3.1'; 2 | 3 | Package.describe({ 4 | name: 'nolimits4web:swiper', 5 | summary: 'iDangero.us Swiper - mobile touch slider with hardware accelerated transitions and native behavior', 6 | version: version, 7 | git: 'https://github.com/nolimits4web/Swiper' 8 | }); 9 | 10 | Package.onUse(function (api) { 11 | api.versionsFrom('1.1.0.2'); 12 | 13 | api.addFiles([ 14 | 'dist/css/swiper.min.css', 15 | 'dist/js/swiper.js' 16 | ], ['client'] 17 | ); 18 | 19 | // Since swiper is attached to window, we do not need to export Swiper 20 | // api.export('Swiper'); 21 | }); 22 | 23 | Package.onTest(function (api) { 24 | }); 25 | -------------------------------------------------------------------------------- /src/less/scrollbar.less: -------------------------------------------------------------------------------- 1 | /* Scrollbar */ 2 | .swiper-scrollbar { 3 | border-radius: 10px; 4 | position: relative; 5 | -ms-touch-action: none; 6 | background: rgba(0,0,0,0.1); 7 | .swiper-container-horizontal > & { 8 | position: absolute; 9 | left: 1%; 10 | bottom: 3px; 11 | z-index: 50; 12 | height: 5px; 13 | width: 98%; 14 | } 15 | .swiper-container-vertical > & { 16 | position: absolute; 17 | right: 3px; 18 | top: 1%; 19 | z-index: 50; 20 | width: 5px; 21 | height: 98%; 22 | } 23 | } 24 | .swiper-scrollbar-drag { 25 | height: 100%; 26 | width: 100%; 27 | position: relative; 28 | background: rgba(0,0,0,0.5); 29 | border-radius: 10px; 30 | left: 0; 31 | top: 0; 32 | } 33 | .swiper-scrollbar-cursor-drag { 34 | cursor: move; 35 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Swiper", 3 | "repository": { 4 | "type": "git", 5 | "url": "https://github.com/nolimits4web/Swiper.git" 6 | }, 7 | "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", 8 | "version": "3.3.1", 9 | "author": "Vladimir Kharlampidi", 10 | "homepage": "http://www.idangero.us/swiper/", 11 | "keywords": ["swiper", "swipe", "slider", "touch", "ios", "mobile", "cordova", "phonegap", "app", "framework", "carousel", "gallery"], 12 | "dependencies": { 13 | }, 14 | "scripts": [ 15 | "dist/js/swiper.js" 16 | ], 17 | "main": [ 18 | "dist/js/swiper.js", 19 | "dist/css/swiper.css" 20 | ], 21 | "styles": [ 22 | "dist/css/swiper.css" 23 | ], 24 | "license": ["MIT"], 25 | "dependencies": {}, 26 | "ignore": [ 27 | ".*", 28 | "demos", 29 | "gulpfile", 30 | "build", 31 | "node_modules", 32 | "playground", 33 | "package.json" 34 | ] 35 | } -------------------------------------------------------------------------------- /src/js/hashnav.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Hash Navigation 3 | ===========================*/ 4 | s.hashnav = { 5 | init: function () { 6 | if (!s.params.hashnav) return; 7 | s.hashnav.initialized = true; 8 | var hash = document.location.hash.replace('#', ''); 9 | if (!hash) return; 10 | var speed = 0; 11 | for (var i = 0, length = s.slides.length; i < length; i++) { 12 | var slide = s.slides.eq(i); 13 | var slideHash = slide.attr('data-hash'); 14 | if (slideHash === hash && !slide.hasClass(s.params.slideDuplicateClass)) { 15 | var index = slide.index(); 16 | s.slideTo(index, speed, s.params.runCallbacksOnInit, true); 17 | } 18 | } 19 | }, 20 | setHash: function () { 21 | if (!s.hashnav.initialized || !s.params.hashnav) return; 22 | document.location.hash = s.slides.eq(s.activeIndex).attr('data-hash') || ''; 23 | } 24 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Vladimir Kharlampidi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "swiper", 3 | "version": "3.3.1", 4 | "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", 5 | "main": "dist/js/swiper.js", 6 | "files": ["dist", "src", "*.json", "*.js"], 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/nolimits4web/Swiper.git" 10 | }, 11 | "keywords": ["swiper", "swipe", "slider", "touch", "ios", "mobile", "cordova", "phonegap", "app", "framework", "carousel", "gallery"], 12 | "author": "Vladimir Kharlampidi", 13 | "license": "MIT", 14 | "bugs": { 15 | "url": "https://github.com/nolimits4web/Swiper/issues" 16 | }, 17 | "homepage": "http://www.idangero.us/swiper/", 18 | "engines": { 19 | "node": ">= 0.10.0" 20 | }, 21 | "devDependencies": { 22 | "jshint": "~2.9.1", 23 | "gulp": "~3.9.0", 24 | "gulp-less": "~3.0.5", 25 | "gulp-connect": "~2.3.1", 26 | "gulp-open": "~1.0.0", 27 | "gulp-uglify": "~1.5.1", 28 | "gulp-sourcemaps": "~1.6.0", 29 | "gulp-minify-css": "1.2.3", 30 | "gulp-jshint": "~2.0.0", 31 | "gulp-concat": "~2.6.0", 32 | "gulp-rename": "~1.2.2", 33 | "gulp-header": "~1.7.1", 34 | "gulp-tap": "~0.1.3", 35 | "jshint-stylish": "~2.1.0" 36 | }, 37 | "scripts": { 38 | "test": "gulp build" 39 | }, 40 | "style": "dist/css/swiper.css" 41 | } 42 | -------------------------------------------------------------------------------- /playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper Playground 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
Slide 1
16 |
Slide 2
17 |
Slide 3
18 |
Slide 4
19 |
Slide 5
20 |
Slide 6
21 |
Slide 7
22 |
Slide 8
23 |
Slide 9
24 |
Slide 10
25 |
26 |
27 |
28 | 47 | 48 | 61 | 62 | -------------------------------------------------------------------------------- /demos/36-pagination-fraction.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 31 | 32 | 33 | 34 |
35 |
36 |
Slide 1
37 |
Slide 2
38 |
Slide 3
39 |
Slide 4
40 |
Slide 5
41 |
Slide 6
42 |
Slide 7
43 |
Slide 8
44 |
Slide 9
45 |
Slide 10
46 |
47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 66 | 67 | -------------------------------------------------------------------------------- /demos/37-pagination-progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 31 | 32 | 33 | 34 |
35 |
36 |
Slide 1
37 |
Slide 2
38 |
Slide 3
39 |
Slide 4
40 |
Slide 5
41 |
Slide 6
42 |
Slide 7
43 |
Slide 8
44 |
Slide 9
45 |
Slide 10
46 |
47 | 48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 66 | 67 | -------------------------------------------------------------------------------- /demos/01-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 44 | 45 | 46 | 47 |
48 |
49 |
Slide 1
50 |
Slide 2
51 |
Slide 3
52 |
Slide 4
53 |
Slide 5
54 |
Slide 6
55 |
Slide 7
56 |
Slide 8
57 |
Slide 9
58 |
Slide 10
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | -------------------------------------------------------------------------------- /src/js/parallax.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Parallax 3 | ===========================*/ 4 | function setParallaxTransform(el, progress) { 5 | el = $(el); 6 | var p, pX, pY; 7 | var rtlFactor = s.rtl ? -1 : 1; 8 | 9 | p = el.attr('data-swiper-parallax') || '0'; 10 | pX = el.attr('data-swiper-parallax-x'); 11 | pY = el.attr('data-swiper-parallax-y'); 12 | if (pX || pY) { 13 | pX = pX || '0'; 14 | pY = pY || '0'; 15 | } 16 | else { 17 | if (s.isHorizontal()) { 18 | pX = p; 19 | pY = '0'; 20 | } 21 | else { 22 | pY = p; 23 | pX = '0'; 24 | } 25 | } 26 | 27 | if ((pX).indexOf('%') >= 0) { 28 | pX = parseInt(pX, 10) * progress * rtlFactor + '%'; 29 | } 30 | else { 31 | pX = pX * progress * rtlFactor + 'px' ; 32 | } 33 | if ((pY).indexOf('%') >= 0) { 34 | pY = parseInt(pY, 10) * progress + '%'; 35 | } 36 | else { 37 | pY = pY * progress + 'px' ; 38 | } 39 | 40 | el.transform('translate3d(' + pX + ', ' + pY + ',0px)'); 41 | } 42 | s.parallax = { 43 | setTranslate: function () { 44 | s.container.children('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function(){ 45 | setParallaxTransform(this, s.progress); 46 | 47 | }); 48 | s.slides.each(function () { 49 | var slide = $(this); 50 | slide.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function () { 51 | var progress = Math.min(Math.max(slide[0].progress, -1), 1); 52 | setParallaxTransform(this, progress); 53 | }); 54 | }); 55 | }, 56 | setTransition: function (duration) { 57 | if (typeof duration === 'undefined') duration = s.params.speed; 58 | s.container.find('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]').each(function(){ 59 | var el = $(this); 60 | var parallaxDuration = parseInt(el.attr('data-swiper-parallax-duration'), 10) || duration; 61 | if (duration === 0) parallaxDuration = 0; 62 | el.transition(parallaxDuration); 63 | }); 64 | } 65 | }; 66 | -------------------------------------------------------------------------------- /src/js/dom-plugins.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Add .swiper plugin from Dom libraries 3 | ===========================*/ 4 | function addLibraryPlugin(lib) { 5 | lib.fn.swiper = function (params) { 6 | var firstInstance; 7 | lib(this).each(function () { 8 | var s = new Swiper(this, params); 9 | if (!firstInstance) firstInstance = s; 10 | }); 11 | return firstInstance; 12 | }; 13 | } 14 | 15 | if (domLib) { 16 | if (!('transitionEnd' in domLib.fn)) { 17 | domLib.fn.transitionEnd = function (callback) { 18 | var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'], 19 | i, j, dom = this; 20 | function fireCallBack(e) { 21 | /*jshint validthis:true */ 22 | if (e.target !== this) return; 23 | callback.call(this, e); 24 | for (i = 0; i < events.length; i++) { 25 | dom.off(events[i], fireCallBack); 26 | } 27 | } 28 | if (callback) { 29 | for (i = 0; i < events.length; i++) { 30 | dom.on(events[i], fireCallBack); 31 | } 32 | } 33 | return this; 34 | }; 35 | } 36 | if (!('transform' in domLib.fn)) { 37 | domLib.fn.transform = function (transform) { 38 | for (var i = 0; i < this.length; i++) { 39 | var elStyle = this[i].style; 40 | elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform; 41 | } 42 | return this; 43 | }; 44 | } 45 | if (!('transition' in domLib.fn)) { 46 | domLib.fn.transition = function (duration) { 47 | if (typeof duration !== 'string') { 48 | duration = duration + 'ms'; 49 | } 50 | for (var i = 0; i < this.length; i++) { 51 | var elStyle = this[i].style; 52 | elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration; 53 | } 54 | return this; 55 | }; 56 | } 57 | } -------------------------------------------------------------------------------- /demos/17-effect-cube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 39 | 40 | 41 | 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 71 | 72 | -------------------------------------------------------------------------------- /src/js/emitter.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Events/Callbacks/Plugins Emitter 3 | ===========================*/ 4 | function normalizeEventName (eventName) { 5 | if (eventName.indexOf('on') !== 0) { 6 | if (eventName[0] !== eventName[0].toUpperCase()) { 7 | eventName = 'on' + eventName[0].toUpperCase() + eventName.substring(1); 8 | } 9 | else { 10 | eventName = 'on' + eventName; 11 | } 12 | } 13 | return eventName; 14 | } 15 | s.emitterEventListeners = { 16 | 17 | }; 18 | s.emit = function (eventName) { 19 | // Trigger callbacks 20 | if (s.params[eventName]) { 21 | s.params[eventName](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); 22 | } 23 | var i; 24 | // Trigger events 25 | if (s.emitterEventListeners[eventName]) { 26 | for (i = 0; i < s.emitterEventListeners[eventName].length; i++) { 27 | s.emitterEventListeners[eventName][i](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); 28 | } 29 | } 30 | // Trigger plugins 31 | if (s.callPlugins) s.callPlugins(eventName, arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]); 32 | }; 33 | s.on = function (eventName, handler) { 34 | eventName = normalizeEventName(eventName); 35 | if (!s.emitterEventListeners[eventName]) s.emitterEventListeners[eventName] = []; 36 | s.emitterEventListeners[eventName].push(handler); 37 | return s; 38 | }; 39 | s.off = function (eventName, handler) { 40 | var i; 41 | eventName = normalizeEventName(eventName); 42 | if (typeof handler === 'undefined') { 43 | // Remove all handlers for such event 44 | s.emitterEventListeners[eventName] = []; 45 | return s; 46 | } 47 | if (!s.emitterEventListeners[eventName] || s.emitterEventListeners[eventName].length === 0) return; 48 | for (i = 0; i < s.emitterEventListeners[eventName].length; i++) { 49 | if(s.emitterEventListeners[eventName][i] === handler) s.emitterEventListeners[eventName].splice(i, 1); 50 | } 51 | return s; 52 | }; 53 | s.once = function (eventName, handler) { 54 | eventName = normalizeEventName(eventName); 55 | var _handler = function () { 56 | handler(arguments[0], arguments[1], arguments[2], arguments[3], arguments[4]); 57 | s.off(eventName, _handler); 58 | }; 59 | s.on(eventName, _handler); 60 | return s; 61 | }; -------------------------------------------------------------------------------- /demos/35-effect-flip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 | 47 |
48 | 49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 67 | 68 | -------------------------------------------------------------------------------- /demos/16-effect-fade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 |
51 | 52 | 53 | 54 | 55 | 56 | 66 | 67 | -------------------------------------------------------------------------------- /demos/34-autoheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 41 | 42 | 43 | 44 |
45 |
46 |
Slide 1
47 |
Slide 2
48 |
Slide 3
49 |
Slide 4
50 |
Slide 5
51 |
Slide 6
52 |
Slide 7
53 |
Slide 8
54 |
Slide 9
55 |
Slide 10
56 |
57 | 58 |
59 | 60 |
61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 | 77 | 78 | -------------------------------------------------------------------------------- /demos/04-space-between.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 46 | 47 | 48 | 49 |
50 |
51 |
Slide 1
52 |
Slide 2
53 |
Slide 3
54 |
Slide 4
55 |
Slide 5
56 |
Slide 6
57 |
Slide 7
58 |
Slide 8
59 |
Slide 9
60 |
Slide 10
61 |
62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 77 | 78 | -------------------------------------------------------------------------------- /demos/02-responsive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 79 | 80 | -------------------------------------------------------------------------------- /demos/03-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 80 | 81 | -------------------------------------------------------------------------------- /demos/09-freemode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 46 | 47 | 48 | 49 |
50 |
51 |
Slide 1
52 |
Slide 2
53 |
Slide 3
54 |
Slide 4
55 |
Slide 5
56 |
Slide 6
57 |
Slide 7
58 |
Slide 8
59 |
Slide 9
60 |
Slide 10
61 |
62 | 63 |
64 |
65 | 66 | 67 | 68 | 69 | 70 | 79 | 80 | -------------------------------------------------------------------------------- /demos/05-slides-per-view.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 81 | 82 | -------------------------------------------------------------------------------- /demos/13-scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 47 | 48 | 49 | 50 |
51 |
52 |
Slide 1
53 |
Slide 2
54 |
Slide 3
55 |
Slide 4
56 |
Slide 5
57 |
Slide 6
58 |
Slide 7
59 |
Slide 8
60 |
Slide 9
61 |
Slide 10
62 |
63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 71 | 81 | 82 | -------------------------------------------------------------------------------- /demos/10-slides-per-column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 48 | 49 | 50 | 51 |
52 |
53 |
Slide 1
54 |
Slide 2
55 |
Slide 3
56 |
Slide 4
57 |
Slide 5
58 |
Slide 6
59 |
Slide 7
60 |
Slide 8
61 |
Slide 9
62 |
Slide 10
63 |
64 | 65 |
66 |
67 | 68 | 69 | 70 | 71 | 72 | 81 | 82 | -------------------------------------------------------------------------------- /demos/07-centered.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 53 | 54 | 55 | 56 |
57 |
58 |
Slide 1
59 |
Slide 2
60 |
Slide 3
61 |
Slide 4
62 |
Slide 5
63 |
Slide 6
64 |
Slide 7
65 |
Slide 8
66 |
Slide 9
67 |
Slide 10
68 |
69 | 70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 86 | 87 | -------------------------------------------------------------------------------- /demos/20-mousewheel-control.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 |
55 |
56 |
Slide 1
57 |
Slide 2
58 |
Slide 3
59 |
Slide 4
60 |
Slide 5
61 |
Slide 6
62 |
Slide 7
63 |
Slide 8
64 |
Slide 9
65 |
Slide 10
66 |
67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 | 85 | 86 | -------------------------------------------------------------------------------- /demos/08-centered-auto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 53 | 54 | 55 | 56 |
57 |
58 |
Slide 1
59 |
Slide 2
60 |
Slide 3
61 |
Slide 4
62 |
Slide 5
63 |
Slide 6
64 |
Slide 7
65 |
Slide 8
66 |
Slide 9
67 |
Slide 10
68 |
69 | 70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 86 | 87 | -------------------------------------------------------------------------------- /demos/26-rtl.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 84 | 85 | -------------------------------------------------------------------------------- /demos/12-grab-cursor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 53 | 54 | 55 | 56 |
57 |
58 |
Slide 1
59 |
Slide 2
60 |
Slide 3
61 |
Slide 4
62 |
Slide 5
63 |
Slide 6
64 |
Slide 7
65 |
Slide 8
66 |
Slide 9
67 |
Slide 10
68 |
69 | 70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 87 | 88 | -------------------------------------------------------------------------------- /demos/06-slides-per-view-auto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 56 | 57 | 58 | 59 |
60 |
61 |
Slide 1
62 |
Slide 2
63 |
Slide 3
64 |
Slide 4
65 |
Slide 5
66 |
Slide 6
67 |
Slide 7
68 |
Slide 8
69 |
Slide 9
70 |
Slide 10
71 |
72 | 73 |
74 |
75 | 76 | 77 | 78 | 79 | 80 | 88 | 89 | -------------------------------------------------------------------------------- /demos/14-nav-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 85 | 86 | -------------------------------------------------------------------------------- /demos/27-jquery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 86 | 87 | -------------------------------------------------------------------------------- /demos/15-infinite-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 |
55 |
56 |
Slide 1
57 |
Slide 2
58 |
Slide 3
59 |
Slide 4
60 |
Slide 5
61 |
Slide 6
62 |
Slide 7
63 |
Slide 8
64 |
Slide 9
65 |
Slide 10
66 |
67 | 68 |
69 | 70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 89 | 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Join the chat at https://gitter.im/nolimits4web/Swiper](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/nolimits4web/Swiper?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 2 | [![Build Status](https://travis-ci.org/nolimits4web/Swiper.svg?branch=master)](https://travis-ci.org/nolimits4web/Swiper) 3 | [![devDependency Status](https://david-dm.org/nolimits4web/swiper/dev-status.svg)](https://david-dm.org/nolimits4web/swiper#info=devDependencies) 4 | [![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=nolimits4web&url=https://github.com/nolimits4web/swiper/&title=Framework7&language=JavaScript&tags=github&category=software) 5 | 6 | Swiper 7 | ========== 8 | 9 | Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers 10 | 11 | Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. 12 | 13 | # Getting Started 14 | * [Getting Started Guide](http://www.idangero.us/swiper/get-started/) 15 | * [API](http://www.idangero.us/swiper/api/) 16 | * [Demos](http://www.idangero.us/swiper/demos/) 17 | * [Forum](http://www.idangero.us/swiper/forum/) 18 | 19 | # Dist / Build 20 | 21 | On production use files (JS and CSS) only from `dist/` folder, there will be the most stable versions, `build/` folder is only for development purpose 22 | 23 | ### Build 24 | 25 | Swiper uses `gulp` to build a development (build) and dist versions. 26 | 27 | First you need to have `gulp-cli` which you should install globally. 28 | 29 | ``` 30 | $ npm install --global gulp 31 | ``` 32 | 33 | Then install all dependencies, in repo's root: 34 | 35 | ``` 36 | $ npm install 37 | ``` 38 | 39 | And build development version of Swiper: 40 | ``` 41 | $ gulp build 42 | ``` 43 | 44 | The result is available in `build/` folder. 45 | 46 | ### Dist/Release 47 | 48 | After you have made build: 49 | 50 | ``` 51 | $ gulp dist 52 | ``` 53 | 54 | Distributable version will available in `dist/` folder. 55 | 56 | # Contributing 57 | 58 | All changes should be commited to `src/` files. Swiper uses LESS for CSS compliations, and concatenated JS files (look at gulpfile.js for concat files order) 59 | 60 | Swiper 2.x.x 61 | ========== 62 | 63 | If you still using Swiper 2.x.x or you need old browsers support, you may find it in [Swiper2 Branch](https://github.com/nolimits4web/Swiper/tree/Swiper2) 64 | * [Download Latest Swiper 2.7.6](https://github.com/nolimits4web/Swiper/archive/v2.7.6.zip) 65 | * [Source Files](https://github.com/nolimits4web/Swiper/tree/Swiper2/src) 66 | * [API](https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md) -------------------------------------------------------------------------------- /demos/21-autoplay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 50 | 51 | 52 | 53 |
54 |
55 |
Slide 1
56 |
Slide 2
57 |
Slide 3
58 |
Slide 4
59 |
Slide 5
60 |
Slide 6
61 |
Slide 7
62 |
Slide 8
63 |
Slide 9
64 |
Slide 10
65 |
66 | 67 |
68 | 69 |
70 |
71 |
72 | 73 | 74 | 75 | 76 | 77 | 89 | 90 | -------------------------------------------------------------------------------- /demos/19-keyboard-control.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 51 | 52 | 53 | 54 |
55 |
56 |
Slide 1
57 |
Slide 2
58 |
Slide 3
59 |
Slide 4
60 |
Slide 5
61 |
Slide 6
62 |
Slide 7
63 |
Slide 8
64 |
Slide 9
65 |
Slide 10
66 |
67 | 68 |
69 | 70 |
71 |
72 |
73 | 74 | 75 | 76 | 77 | 78 | 89 | 90 | -------------------------------------------------------------------------------- /demos/18-effect-coverflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 74 | 75 | -------------------------------------------------------------------------------- /demos/25-hash-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 86 | 87 | -------------------------------------------------------------------------------- /src/js/swiper-proto.js: -------------------------------------------------------------------------------- 1 | /*================================================== 2 | Prototype 3 | ====================================================*/ 4 | Swiper.prototype = { 5 | isSafari: (function () { 6 | var ua = navigator.userAgent.toLowerCase(); 7 | return (ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0 && ua.indexOf('android') < 0); 8 | })(), 9 | isUiWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent), 10 | isArray: function (arr) { 11 | return Object.prototype.toString.apply(arr) === '[object Array]'; 12 | }, 13 | /*================================================== 14 | Browser 15 | ====================================================*/ 16 | browser: { 17 | ie: window.navigator.pointerEnabled || window.navigator.msPointerEnabled, 18 | ieTouch: (window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 1) || (window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 1) 19 | }, 20 | /*================================================== 21 | Devices 22 | ====================================================*/ 23 | device: (function () { 24 | var ua = navigator.userAgent; 25 | var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); 26 | var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); 27 | var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); 28 | var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); 29 | return { 30 | ios: ipad || iphone || ipod, 31 | android: android 32 | }; 33 | })(), 34 | /*================================================== 35 | Feature Detection 36 | ====================================================*/ 37 | support: { 38 | touch : (window.Modernizr && Modernizr.touch === true) || (function () { 39 | return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); 40 | })(), 41 | 42 | transforms3d : (window.Modernizr && Modernizr.csstransforms3d === true) || (function () { 43 | var div = document.createElement('div').style; 44 | return ('webkitPerspective' in div || 'MozPerspective' in div || 'OPerspective' in div || 'MsPerspective' in div || 'perspective' in div); 45 | })(), 46 | 47 | flexbox: (function () { 48 | var div = document.createElement('div').style; 49 | var styles = ('alignItems webkitAlignItems webkitBoxAlign msFlexAlign mozBoxAlign webkitFlexDirection msFlexDirection mozBoxDirection mozBoxOrient webkitBoxDirection webkitBoxOrient').split(' '); 50 | for (var i = 0; i < styles.length; i++) { 51 | if (styles[i] in div) return true; 52 | } 53 | })(), 54 | 55 | observer: (function () { 56 | return ('MutationObserver' in window || 'WebkitMutationObserver' in window); 57 | })() 58 | }, 59 | /*================================================== 60 | Plugins 61 | ====================================================*/ 62 | plugins: {} 63 | }; 64 | -------------------------------------------------------------------------------- /demos/29-custom-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 63 | 64 | 65 | 66 |
67 |
68 |
Slide 1
69 |
Slide 2
70 |
Slide 3
71 |
Slide 4
72 |
Slide 5
73 |
Slide 6
74 |
Slide 7
75 |
Slide 8
76 |
Slide 9
77 |
Slide 10
78 |
79 | 80 |
81 |
82 | 83 | 84 | 85 | 86 | 87 | 96 | 97 | -------------------------------------------------------------------------------- /src/less/preloader.less: -------------------------------------------------------------------------------- 1 | /* Preloader */ 2 | .swiper-lazy-preloader { 3 | width: 42px; 4 | height: 42px; 5 | position: absolute; 6 | left: 50%; 7 | top: 50%; 8 | margin-left: -21px; 9 | margin-top: -21px; 10 | z-index: 10; 11 | -webkit-transform-origin: 50%; 12 | -moz-transform-origin: 50%; 13 | transform-origin: 50%; 14 | -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; 15 | -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; 16 | animation: swiper-preloader-spin 1s steps(12, end) infinite; 17 | } 18 | .swiper-lazy-preloader:after { 19 | display: block; 20 | content: ""; 21 | width: 100%; 22 | height: 100%; 23 | .encoded-svg-background(""); 24 | background-position: 50%; 25 | -webkit-background-size: 100%; 26 | background-size: 100%; 27 | background-repeat: no-repeat; 28 | 29 | } 30 | .swiper-lazy-preloader-white:after { 31 | .encoded-svg-background(""); 32 | } 33 | @-webkit-keyframes swiper-preloader-spin { 34 | 100% { 35 | -webkit-transform: rotate(360deg); 36 | } 37 | } 38 | @keyframes swiper-preloader-spin { 39 | 100% { 40 | transform: rotate(360deg); 41 | } 42 | } -------------------------------------------------------------------------------- /src/js/a11y.js: -------------------------------------------------------------------------------- 1 | // Accessibility tools 2 | s.a11y = { 3 | makeFocusable: function ($el) { 4 | $el.attr('tabIndex', '0'); 5 | return $el; 6 | }, 7 | addRole: function ($el, role) { 8 | $el.attr('role', role); 9 | return $el; 10 | }, 11 | 12 | addLabel: function ($el, label) { 13 | $el.attr('aria-label', label); 14 | return $el; 15 | }, 16 | 17 | disable: function ($el) { 18 | $el.attr('aria-disabled', true); 19 | return $el; 20 | }, 21 | 22 | enable: function ($el) { 23 | $el.attr('aria-disabled', false); 24 | return $el; 25 | }, 26 | 27 | onEnterKey: function (event) { 28 | if (event.keyCode !== 13) return; 29 | if ($(event.target).is(s.params.nextButton)) { 30 | s.onClickNext(event); 31 | if (s.isEnd) { 32 | s.a11y.notify(s.params.lastSlideMessage); 33 | } 34 | else { 35 | s.a11y.notify(s.params.nextSlideMessage); 36 | } 37 | } 38 | else if ($(event.target).is(s.params.prevButton)) { 39 | s.onClickPrev(event); 40 | if (s.isBeginning) { 41 | s.a11y.notify(s.params.firstSlideMessage); 42 | } 43 | else { 44 | s.a11y.notify(s.params.prevSlideMessage); 45 | } 46 | } 47 | if ($(event.target).is('.' + s.params.bulletClass)) { 48 | $(event.target)[0].click(); 49 | } 50 | }, 51 | 52 | liveRegion: $(''), 53 | 54 | notify: function (message) { 55 | var notification = s.a11y.liveRegion; 56 | if (notification.length === 0) return; 57 | notification.html(''); 58 | notification.html(message); 59 | }, 60 | init: function () { 61 | // Setup accessibility 62 | if (s.params.nextButton && s.nextButton && s.nextButton.length > 0) { 63 | s.a11y.makeFocusable(s.nextButton); 64 | s.a11y.addRole(s.nextButton, 'button'); 65 | s.a11y.addLabel(s.nextButton, s.params.nextSlideMessage); 66 | } 67 | if (s.params.prevButton && s.prevButton && s.prevButton.length > 0) { 68 | s.a11y.makeFocusable(s.prevButton); 69 | s.a11y.addRole(s.prevButton, 'button'); 70 | s.a11y.addLabel(s.prevButton, s.params.prevSlideMessage); 71 | } 72 | 73 | $(s.container).append(s.a11y.liveRegion); 74 | }, 75 | initPagination: function () { 76 | if (s.params.pagination && s.params.paginationClickable && s.bullets && s.bullets.length) { 77 | s.bullets.each(function () { 78 | var bullet = $(this); 79 | s.a11y.makeFocusable(bullet); 80 | s.a11y.addRole(bullet, 'button'); 81 | s.a11y.addLabel(bullet, s.params.paginationBulletMessage.replace(/{{index}}/, bullet.index() + 1)); 82 | }); 83 | } 84 | }, 85 | destroy: function () { 86 | if (s.a11y.liveRegion && s.a11y.liveRegion.length > 0) s.a11y.liveRegion.remove(); 87 | } 88 | }; 89 | -------------------------------------------------------------------------------- /src/js/keyboard.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Keyboard Control 3 | ===========================*/ 4 | function handleKeyboard(e) { 5 | if (e.originalEvent) e = e.originalEvent; //jquery fix 6 | var kc = e.keyCode || e.charCode; 7 | // Directions locks 8 | if (!s.params.allowSwipeToNext && (s.isHorizontal() && kc === 39 || !s.isHorizontal() && kc === 40)) { 9 | return false; 10 | } 11 | if (!s.params.allowSwipeToPrev && (s.isHorizontal() && kc === 37 || !s.isHorizontal() && kc === 38)) { 12 | return false; 13 | } 14 | if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) { 15 | return; 16 | } 17 | if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) { 18 | return; 19 | } 20 | if (kc === 37 || kc === 39 || kc === 38 || kc === 40) { 21 | var inView = false; 22 | //Check that swiper should be inside of visible area of window 23 | if (s.container.parents('.swiper-slide').length > 0 && s.container.parents('.swiper-slide-active').length === 0) { 24 | return; 25 | } 26 | var windowScroll = { 27 | left: window.pageXOffset, 28 | top: window.pageYOffset 29 | }; 30 | var windowWidth = window.innerWidth; 31 | var windowHeight = window.innerHeight; 32 | var swiperOffset = s.container.offset(); 33 | if (s.rtl) swiperOffset.left = swiperOffset.left - s.container[0].scrollLeft; 34 | var swiperCoord = [ 35 | [swiperOffset.left, swiperOffset.top], 36 | [swiperOffset.left + s.width, swiperOffset.top], 37 | [swiperOffset.left, swiperOffset.top + s.height], 38 | [swiperOffset.left + s.width, swiperOffset.top + s.height] 39 | ]; 40 | for (var i = 0; i < swiperCoord.length; i++) { 41 | var point = swiperCoord[i]; 42 | if ( 43 | point[0] >= windowScroll.left && point[0] <= windowScroll.left + windowWidth && 44 | point[1] >= windowScroll.top && point[1] <= windowScroll.top + windowHeight 45 | ) { 46 | inView = true; 47 | } 48 | 49 | } 50 | if (!inView) return; 51 | } 52 | if (s.isHorizontal()) { 53 | if (kc === 37 || kc === 39) { 54 | if (e.preventDefault) e.preventDefault(); 55 | else e.returnValue = false; 56 | } 57 | if ((kc === 39 && !s.rtl) || (kc === 37 && s.rtl)) s.slideNext(); 58 | if ((kc === 37 && !s.rtl) || (kc === 39 && s.rtl)) s.slidePrev(); 59 | } 60 | else { 61 | if (kc === 38 || kc === 40) { 62 | if (e.preventDefault) e.preventDefault(); 63 | else e.returnValue = false; 64 | } 65 | if (kc === 40) s.slideNext(); 66 | if (kc === 38) s.slidePrev(); 67 | } 68 | } 69 | s.disableKeyboardControl = function () { 70 | s.params.keyboardControl = false; 71 | $(document).off('keydown', handleKeyboard); 72 | }; 73 | s.enableKeyboardControl = function () { 74 | s.params.keyboardControl = true; 75 | $(document).on('keydown', handleKeyboard); 76 | }; 77 | -------------------------------------------------------------------------------- /demos/33-responsive-breakpoints.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 99 | 100 | -------------------------------------------------------------------------------- /src/less/core.less: -------------------------------------------------------------------------------- 1 | .swiper-container { 2 | margin:0 auto; 3 | position:relative; 4 | overflow:hidden; 5 | /* Fix of Webkit flickering */ 6 | z-index:1; 7 | } 8 | .swiper-container-no-flexbox { 9 | .swiper-slide { 10 | float: left; 11 | } 12 | } 13 | .swiper-container-vertical > .swiper-wrapper{ 14 | -webkit-box-orient: vertical; 15 | -moz-box-orient: vertical; 16 | -ms-flex-direction: column; 17 | -webkit-flex-direction: column; 18 | flex-direction: column; 19 | } 20 | .swiper-wrapper { 21 | position:relative; 22 | width: 100%; 23 | height: 100%; 24 | z-index: 1; 25 | display: -webkit-box; 26 | display: -moz-box; 27 | display: -ms-flexbox; 28 | display: -webkit-flex; 29 | display: flex; 30 | 31 | -webkit-transition-property:-webkit-transform; 32 | -moz-transition-property:-moz-transform; 33 | -o-transition-property:-o-transform; 34 | -ms-transition-property:-ms-transform; 35 | transition-property:transform; 36 | 37 | -webkit-box-sizing: content-box; 38 | -moz-box-sizing: content-box; 39 | box-sizing: content-box; 40 | } 41 | .swiper-container-android .swiper-slide, .swiper-wrapper { 42 | -webkit-transform:translate3d(0px,0,0); 43 | -moz-transform:translate3d(0px,0,0); 44 | -o-transform:translate(0px,0px); 45 | -ms-transform:translate3d(0px,0,0); 46 | transform:translate3d(0px,0,0); 47 | } 48 | .swiper-container-multirow > .swiper-wrapper { 49 | -webkit-box-lines: multiple; 50 | -moz-box-lines: multiple; 51 | -ms-flex-wrap: wrap; 52 | -webkit-flex-wrap: wrap; 53 | flex-wrap: wrap; 54 | } 55 | .swiper-container-free-mode > .swiper-wrapper { 56 | -webkit-transition-timing-function: ease-out; 57 | -moz-transition-timing-function: ease-out; 58 | -ms-transition-timing-function: ease-out; 59 | -o-transition-timing-function: ease-out; 60 | transition-timing-function: ease-out; 61 | margin: 0 auto; 62 | } 63 | .swiper-slide { 64 | -webkit-flex-shrink: 0; 65 | -ms-flex: 0 0 auto; 66 | flex-shrink: 0; 67 | width: 100%; 68 | height: 100%; 69 | position: relative; 70 | } 71 | /* Auto Height */ 72 | .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { 73 | height: auto; 74 | } 75 | .swiper-container-autoheight .swiper-wrapper { 76 | -webkit-box-align: start; 77 | -ms-flex-align: start; 78 | -webkit-align-items: flex-start; 79 | align-items: flex-start; 80 | -webkit-transition-property: -webkit-transform, height; 81 | -moz-transition-property: -moz-transform; 82 | -o-transition-property: -o-transform; 83 | -ms-transition-property: -ms-transform; 84 | transition-property: transform, height; 85 | } 86 | /* a11y */ 87 | .swiper-container .swiper-notification { 88 | position: absolute; 89 | left: 0; 90 | top: 0; 91 | pointer-events: none; 92 | opacity: 0; 93 | z-index: -1000; 94 | } 95 | 96 | /* IE10 Windows Phone 8 Fixes */ 97 | .swiper-wp8-horizontal { 98 | -ms-touch-action: pan-y; 99 | touch-action: pan-y; 100 | } 101 | .swiper-wp8-vertical { 102 | -ms-touch-action: pan-x; 103 | touch-action: pan-x; 104 | } -------------------------------------------------------------------------------- /demos/11-nested.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 52 | 53 | 54 | 55 |
56 |
57 |
Horizontal Slide 1
58 |
59 |
60 |
61 |
Vertical Slide 1
62 |
Vertical Slide 2
63 |
Vertical Slide 3
64 |
Vertical Slide 4
65 |
Vertical Slide 5
66 |
67 |
68 |
69 |
70 |
Horizontal Slide 3
71 |
Horizontal Slide 4
72 |
73 | 74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 94 | 95 | -------------------------------------------------------------------------------- /demos/30-lazy-load-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 |
61 | 62 |
63 |
64 |
65 | 66 |
67 |
68 |
69 | 70 |
71 |
72 |
73 | 74 |
75 |
76 |
77 | 78 |
79 |
80 | 81 |
82 | 83 |
84 | 85 |
86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 105 | 106 | -------------------------------------------------------------------------------- /demos/22-dynamic-slides.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 60 | 61 | 62 | 63 |
64 |
65 |
Slide 1
66 |
Slide 2
67 |
Slide 3
68 |
Slide 4
69 |
70 | 71 |
72 | 73 |
74 |
75 |
76 |

77 | Prepend 2 Slides 78 | Prepend Slide 79 | Append Slide 80 | Append 2 Slides 81 |

82 | 83 | 84 | 85 | 86 | 121 | 122 | -------------------------------------------------------------------------------- /src/less/navigation-f7.less: -------------------------------------------------------------------------------- 1 | /* Arrows */ 2 | .swiper-button-prev, .swiper-button-next { 3 | position: absolute; 4 | top: 50%; 5 | width: 27px; 6 | height: 44px; 7 | margin-top: -22px; 8 | z-index: 10; 9 | cursor: pointer; 10 | -moz-background-size: 27px 44px; 11 | -webkit-background-size: 27px 44px; 12 | background-size: 27px 44px; 13 | background-position: center; 14 | background-repeat: no-repeat; 15 | &.swiper-button-disabled { 16 | opacity: 0.35; 17 | cursor: auto; 18 | pointer-events: none; 19 | } 20 | } 21 | .swiper-button-prev, .swiper-container-rtl .swiper-button-next { 22 | .encoded-svg-background(""); 23 | left: 10px; 24 | right: auto; 25 | } 26 | .swiper-button-next, .swiper-container-rtl .swiper-button-prev { 27 | .encoded-svg-background(""); 28 | right: 10px; 29 | left: auto; 30 | } 31 | 32 | /* Pagination Styles */ 33 | .swiper-pagination { 34 | position: absolute; 35 | text-align: center; 36 | -webkit-transition: 300ms; 37 | -moz-transition: 300ms; 38 | -o-transition: 300ms; 39 | transition: 300ms; 40 | -webkit-transform: translate3d(0,0,0); 41 | -ms-transform: translate3d(0,0,0); 42 | -o-transform: translate3d(0,0,0); 43 | transform: translate3d(0,0,0); 44 | z-index: 10; 45 | &.swiper-pagination-hidden { 46 | opacity: 0; 47 | } 48 | } 49 | /* Common Styles */ 50 | .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ 51 | bottom: 10px; 52 | left: 0; 53 | width: 100%; 54 | } 55 | /* Bullets */ 56 | .swiper-pagination-bullet { 57 | width: 8px; 58 | height: 8px; 59 | display: inline-block; 60 | border-radius: 100%; 61 | background: #000; 62 | opacity: 0.2; 63 | button& { 64 | border: none; 65 | margin: 0; 66 | padding: 0; 67 | box-shadow: none; 68 | -moz-appearance: none; 69 | -ms-appearance: none; 70 | -webkit-appearance: none; 71 | appearance: none; 72 | } 73 | .swiper-pagination-clickable & { 74 | cursor: pointer; 75 | } 76 | } 77 | .swiper-pagination-bullet-active { 78 | opacity: 1; 79 | background: #007aff; 80 | } 81 | .swiper-container-vertical { 82 | > .swiper-pagination-bullets { 83 | right: 10px; 84 | top: 50%; 85 | -webkit-transform:translate3d(0px,-50%,0); 86 | -moz-transform:translate3d(0px,-50%,0); 87 | -o-transform:translate(0px,-50%); 88 | -ms-transform:translate3d(0px,-50%,0); 89 | transform:translate3d(0px,-50%,0); 90 | .swiper-pagination-bullet { 91 | margin: 5px 0; 92 | display: block; 93 | } 94 | } 95 | } 96 | .swiper-container-horizontal { 97 | > .swiper-pagination-bullets { 98 | .swiper-pagination-bullet { 99 | margin: 0 5px; 100 | } 101 | } 102 | } 103 | /* Progress */ 104 | .swiper-pagination-progress { 105 | background: rgba(0,0,0,0.25); 106 | position: absolute; 107 | .swiper-pagination-progressbar { 108 | background: #007aff; 109 | position: absolute; 110 | left: 0; 111 | top: 0; 112 | width: 100%; 113 | height: 100%; 114 | -webkit-transform: scale(0); 115 | -ms-transform: scale(0); 116 | -o-transform: scale(0); 117 | transform: scale(0); 118 | -webkit-transform-origin: left top; 119 | -moz-transform-origin: left top; 120 | -ms-transform-origin: left top; 121 | -o-transform-origin: left top; 122 | transform-origin: left top; 123 | } 124 | .swiper-container-rtl & .swiper-pagination-progressbar { 125 | -webkit-transform-origin: right top; 126 | -moz-transform-origin: right top; 127 | -ms-transform-origin: right top; 128 | -o-transform-origin: right top; 129 | transform-origin: right top; 130 | } 131 | .swiper-container-horizontal > & { 132 | width: 100%; 133 | height: 4px; 134 | left: 0; 135 | top: 0; 136 | } 137 | .swiper-container-vertical > & { 138 | width: 4px; 139 | height: 100%; 140 | left: 0; 141 | top: 0; 142 | } 143 | } -------------------------------------------------------------------------------- /demos/24-multiple-swipers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 46 | 47 | 48 | 49 |
50 |
51 |
Slide 1
52 |
Slide 2
53 |
Slide 3
54 |
Slide 4
55 |
Slide 5
56 |
Slide 6
57 |
Slide 7
58 |
Slide 8
59 |
Slide 9
60 |
Slide 10
61 |
62 | 63 |
64 |
65 | 66 | 67 |
68 |
69 |
Slide 1
70 |
Slide 2
71 |
Slide 3
72 |
Slide 4
73 |
Slide 5
74 |
Slide 6
75 |
Slide 7
76 |
Slide 8
77 |
Slide 9
78 |
Slide 10
79 |
80 | 81 |
82 |
83 | 84 | 85 |
86 |
87 |
Slide 1
88 |
Slide 2
89 |
Slide 3
90 |
Slide 4
91 |
Slide 5
92 |
Slide 6
93 |
Slide 7
94 |
Slide 8
95 |
Slide 9
96 |
Slide 10
97 |
98 | 99 |
100 |
101 | 102 | 103 | 104 | 105 | 106 | 123 | 124 | -------------------------------------------------------------------------------- /src/js/init.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Init/Destroy 3 | ===========================*/ 4 | s.init = function () { 5 | if (s.params.loop) s.createLoop(); 6 | s.updateContainerSize(); 7 | s.updateSlidesSize(); 8 | s.updatePagination(); 9 | if (s.params.scrollbar && s.scrollbar) { 10 | s.scrollbar.set(); 11 | if (s.params.scrollbarDraggable) { 12 | s.scrollbar.enableDraggable(); 13 | } 14 | } 15 | if (s.params.effect !== 'slide' && s.effects[s.params.effect]) { 16 | if (!s.params.loop) s.updateProgress(); 17 | s.effects[s.params.effect].setTranslate(); 18 | } 19 | if (s.params.loop) { 20 | s.slideTo(s.params.initialSlide + s.loopedSlides, 0, s.params.runCallbacksOnInit); 21 | } 22 | else { 23 | s.slideTo(s.params.initialSlide, 0, s.params.runCallbacksOnInit); 24 | if (s.params.initialSlide === 0) { 25 | if (s.parallax && s.params.parallax) s.parallax.setTranslate(); 26 | if (s.lazy && s.params.lazyLoading) { 27 | s.lazy.load(); 28 | s.lazy.initialImageLoaded = true; 29 | } 30 | } 31 | } 32 | s.attachEvents(); 33 | if (s.params.observer && s.support.observer) { 34 | s.initObservers(); 35 | } 36 | if (s.params.preloadImages && !s.params.lazyLoading) { 37 | s.preloadImages(); 38 | } 39 | if (s.params.autoplay) { 40 | s.startAutoplay(); 41 | } 42 | if (s.params.keyboardControl) { 43 | if (s.enableKeyboardControl) s.enableKeyboardControl(); 44 | } 45 | if (s.params.mousewheelControl) { 46 | if (s.enableMousewheelControl) s.enableMousewheelControl(); 47 | } 48 | if (s.params.hashnav) { 49 | if (s.hashnav) s.hashnav.init(); 50 | } 51 | if (s.params.a11y && s.a11y) s.a11y.init(); 52 | s.emit('onInit', s); 53 | }; 54 | 55 | // Cleanup dynamic styles 56 | s.cleanupStyles = function () { 57 | // Container 58 | s.container.removeClass(s.classNames.join(' ')).removeAttr('style'); 59 | 60 | // Wrapper 61 | s.wrapper.removeAttr('style'); 62 | 63 | // Slides 64 | if (s.slides && s.slides.length) { 65 | s.slides 66 | .removeClass([ 67 | s.params.slideVisibleClass, 68 | s.params.slideActiveClass, 69 | s.params.slideNextClass, 70 | s.params.slidePrevClass 71 | ].join(' ')) 72 | .removeAttr('style') 73 | .removeAttr('data-swiper-column') 74 | .removeAttr('data-swiper-row'); 75 | } 76 | 77 | // Pagination/Bullets 78 | if (s.paginationContainer && s.paginationContainer.length) { 79 | s.paginationContainer.removeClass(s.params.paginationHiddenClass); 80 | } 81 | if (s.bullets && s.bullets.length) { 82 | s.bullets.removeClass(s.params.bulletActiveClass); 83 | } 84 | 85 | // Buttons 86 | if (s.params.prevButton) $(s.params.prevButton).removeClass(s.params.buttonDisabledClass); 87 | if (s.params.nextButton) $(s.params.nextButton).removeClass(s.params.buttonDisabledClass); 88 | 89 | // Scrollbar 90 | if (s.params.scrollbar && s.scrollbar) { 91 | if (s.scrollbar.track && s.scrollbar.track.length) s.scrollbar.track.removeAttr('style'); 92 | if (s.scrollbar.drag && s.scrollbar.drag.length) s.scrollbar.drag.removeAttr('style'); 93 | } 94 | }; 95 | 96 | // Destroy 97 | s.destroy = function (deleteInstance, cleanupStyles) { 98 | // Detach evebts 99 | s.detachEvents(); 100 | // Stop autoplay 101 | s.stopAutoplay(); 102 | // Disable draggable 103 | if (s.params.scrollbar && s.scrollbar) { 104 | if (s.params.scrollbarDraggable) { 105 | s.scrollbar.disableDraggable(); 106 | } 107 | } 108 | // Destroy loop 109 | if (s.params.loop) { 110 | s.destroyLoop(); 111 | } 112 | // Cleanup styles 113 | if (cleanupStyles) { 114 | s.cleanupStyles(); 115 | } 116 | // Disconnect observer 117 | s.disconnectObservers(); 118 | // Disable keyboard/mousewheel 119 | if (s.params.keyboardControl) { 120 | if (s.disableKeyboardControl) s.disableKeyboardControl(); 121 | } 122 | if (s.params.mousewheelControl) { 123 | if (s.disableMousewheelControl) s.disableMousewheelControl(); 124 | } 125 | // Disable a11y 126 | if (s.params.a11y && s.a11y) s.a11y.destroy(); 127 | // Destroy callback 128 | s.emit('onDestroy'); 129 | // Delete instance 130 | if (deleteInstance !== false) s = null; 131 | }; 132 | 133 | s.init(); 134 | -------------------------------------------------------------------------------- /demos/31-custom-plugin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 49 | 50 | 51 | 52 |
53 |
54 |
Slide 1
55 |
Slide 2
56 |
Slide 3
57 |
Slide 4
58 |
Slide 5
59 |
Slide 6
60 |
Slide 7
61 |
Slide 8
62 |
Slide 9
63 |
Slide 10
64 |
65 | 66 |
67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 120 | 121 | 122 | 132 | 133 | -------------------------------------------------------------------------------- /src/js/mousewheel.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Mousewheel Control 3 | ===========================*/ 4 | s.mousewheel = { 5 | event: false, 6 | lastScrollTime: (new window.Date()).getTime() 7 | }; 8 | if (s.params.mousewheelControl) { 9 | try { 10 | new window.WheelEvent('wheel'); 11 | s.mousewheel.event = 'wheel'; 12 | } catch (e) { 13 | if (window.WheelEvent || (s.container[0] && 'wheel' in s.container[0])) { 14 | s.mousewheel.event = 'wheel'; 15 | } 16 | } 17 | if (!s.mousewheel.event && window.WheelEvent) { 18 | 19 | } 20 | if (!s.mousewheel.event && document.onmousewheel !== undefined) { 21 | s.mousewheel.event = 'mousewheel'; 22 | } 23 | if (!s.mousewheel.event) { 24 | s.mousewheel.event = 'DOMMouseScroll'; 25 | } 26 | } 27 | function handleMousewheel(e) { 28 | if (e.originalEvent) e = e.originalEvent; //jquery fix 29 | var we = s.mousewheel.event; 30 | var delta = 0; 31 | var rtlFactor = s.rtl ? -1 : 1; 32 | 33 | //WebKits 34 | if (we === 'mousewheel') { 35 | if (s.params.mousewheelForceToAxis) { 36 | if (s.isHorizontal()) { 37 | if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) delta = e.wheelDeltaX * rtlFactor; 38 | else return; 39 | } 40 | else { 41 | if (Math.abs(e.wheelDeltaY) > Math.abs(e.wheelDeltaX)) delta = e.wheelDeltaY; 42 | else return; 43 | } 44 | } 45 | else { 46 | delta = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) ? - e.wheelDeltaX * rtlFactor : - e.wheelDeltaY; 47 | } 48 | } 49 | //Old FireFox 50 | else if (we === 'DOMMouseScroll') delta = -e.detail; 51 | //New FireFox 52 | else if (we === 'wheel') { 53 | if (s.params.mousewheelForceToAxis) { 54 | if (s.isHorizontal()) { 55 | if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) delta = -e.deltaX * rtlFactor; 56 | else return; 57 | } 58 | else { 59 | if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) delta = -e.deltaY; 60 | else return; 61 | } 62 | } 63 | else { 64 | delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? - e.deltaX * rtlFactor : - e.deltaY; 65 | } 66 | } 67 | if (delta === 0) return; 68 | 69 | if (s.params.mousewheelInvert) delta = -delta; 70 | 71 | if (!s.params.freeMode) { 72 | if ((new window.Date()).getTime() - s.mousewheel.lastScrollTime > 60) { 73 | if (delta < 0) { 74 | if ((!s.isEnd || s.params.loop) && !s.animating) s.slideNext(); 75 | else if (s.params.mousewheelReleaseOnEdges) return true; 76 | } 77 | else { 78 | if ((!s.isBeginning || s.params.loop) && !s.animating) s.slidePrev(); 79 | else if (s.params.mousewheelReleaseOnEdges) return true; 80 | } 81 | } 82 | s.mousewheel.lastScrollTime = (new window.Date()).getTime(); 83 | 84 | } 85 | else { 86 | //Freemode or scrollContainer: 87 | var position = s.getWrapperTranslate() + delta * s.params.mousewheelSensitivity; 88 | var wasBeginning = s.isBeginning, 89 | wasEnd = s.isEnd; 90 | 91 | if (position >= s.minTranslate()) position = s.minTranslate(); 92 | if (position <= s.maxTranslate()) position = s.maxTranslate(); 93 | 94 | s.setWrapperTransition(0); 95 | s.setWrapperTranslate(position); 96 | s.updateProgress(); 97 | s.updateActiveIndex(); 98 | 99 | if (!wasBeginning && s.isBeginning || !wasEnd && s.isEnd) { 100 | s.updateClasses(); 101 | } 102 | 103 | if (s.params.freeModeSticky) { 104 | clearTimeout(s.mousewheel.timeout); 105 | s.mousewheel.timeout = setTimeout(function () { 106 | s.slideReset(); 107 | }, 300); 108 | } 109 | else { 110 | if (s.params.lazyLoading && s.lazy) { 111 | s.lazy.load(); 112 | } 113 | } 114 | 115 | // Return page scroll on edge positions 116 | if (position === 0 || position === s.maxTranslate()) return; 117 | } 118 | if (s.params.autoplay) s.stopAutoplay(); 119 | 120 | if (e.preventDefault) e.preventDefault(); 121 | else e.returnValue = false; 122 | return false; 123 | } 124 | s.disableMousewheelControl = function () { 125 | if (!s.mousewheel.event) return false; 126 | s.container.off(s.mousewheel.event, handleMousewheel); 127 | return true; 128 | }; 129 | 130 | s.enableMousewheelControl = function () { 131 | if (!s.mousewheel.event) return false; 132 | s.container.on(s.mousewheel.event, handleMousewheel); 133 | return true; 134 | }; 135 | -------------------------------------------------------------------------------- /demos/23-thumbs-gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 53 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | 70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | 88 | 89 | 90 | 91 | 92 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/28-parallax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 61 | 62 | 63 | 64 |
65 |
66 |
67 |
68 |
Slide 1
69 |
Subtitle
70 |
71 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

72 |
73 |
74 |
75 |
Slide 2
76 |
Subtitle
77 |
78 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

79 |
80 |
81 |
82 |
Slide 3
83 |
Subtitle
84 |
85 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.

86 |
87 |
88 |
89 | 90 |
91 | 92 |
93 |
94 |
95 | 96 | 97 | 98 | 99 | 100 | 110 | 111 | -------------------------------------------------------------------------------- /demos/23-thumbs-gallery-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 52 | 53 | 54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 | 88 | 89 | 90 | 91 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /src/js/controller.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Controller 3 | ===========================*/ 4 | s.controller = { 5 | LinearSpline: function (x, y) { 6 | this.x = x; 7 | this.y = y; 8 | this.lastIndex = x.length - 1; 9 | // Given an x value (x2), return the expected y2 value: 10 | // (x1,y1) is the known point before given value, 11 | // (x3,y3) is the known point after given value. 12 | var i1, i3; 13 | var l = this.x.length; 14 | 15 | this.interpolate = function (x2) { 16 | if (!x2) return 0; 17 | 18 | // Get the indexes of x1 and x3 (the array indexes before and after given x2): 19 | i3 = binarySearch(this.x, x2); 20 | i1 = i3 - 1; 21 | 22 | // We have our indexes i1 & i3, so we can calculate already: 23 | // y2 := ((x2−x1) × (y3−y1)) ÷ (x3−x1) + y1 24 | return ((x2 - this.x[i1]) * (this.y[i3] - this.y[i1])) / (this.x[i3] - this.x[i1]) + this.y[i1]; 25 | }; 26 | 27 | var binarySearch = (function() { 28 | var maxIndex, minIndex, guess; 29 | return function(array, val) { 30 | minIndex = -1; 31 | maxIndex = array.length; 32 | while (maxIndex - minIndex > 1) 33 | if (array[guess = maxIndex + minIndex >> 1] <= val) { 34 | minIndex = guess; 35 | } else { 36 | maxIndex = guess; 37 | } 38 | return maxIndex; 39 | }; 40 | })(); 41 | }, 42 | //xxx: for now i will just save one spline function to to 43 | getInterpolateFunction: function(c){ 44 | if(!s.controller.spline) s.controller.spline = s.params.loop ? 45 | new s.controller.LinearSpline(s.slidesGrid, c.slidesGrid) : 46 | new s.controller.LinearSpline(s.snapGrid, c.snapGrid); 47 | }, 48 | setTranslate: function (translate, byController) { 49 | var controlled = s.params.control; 50 | var multiplier, controlledTranslate; 51 | function setControlledTranslate(c) { 52 | // this will create an Interpolate function based on the snapGrids 53 | // x is the Grid of the scrolled scroller and y will be the controlled scroller 54 | // it makes sense to create this only once and recall it for the interpolation 55 | // the function does a lot of value caching for performance 56 | translate = c.rtl && c.params.direction === 'horizontal' ? -s.translate : s.translate; 57 | if (s.params.controlBy === 'slide') { 58 | s.controller.getInterpolateFunction(c); 59 | // i am not sure why the values have to be multiplicated this way, tried to invert the snapGrid 60 | // but it did not work out 61 | controlledTranslate = -s.controller.spline.interpolate(-translate); 62 | } 63 | 64 | if(!controlledTranslate || s.params.controlBy === 'container'){ 65 | multiplier = (c.maxTranslate() - c.minTranslate()) / (s.maxTranslate() - s.minTranslate()); 66 | controlledTranslate = (translate - s.minTranslate()) * multiplier + c.minTranslate(); 67 | } 68 | 69 | if (s.params.controlInverse) { 70 | controlledTranslate = c.maxTranslate() - controlledTranslate; 71 | } 72 | c.updateProgress(controlledTranslate); 73 | c.setWrapperTranslate(controlledTranslate, false, s); 74 | c.updateActiveIndex(); 75 | } 76 | if (s.isArray(controlled)) { 77 | for (var i = 0; i < controlled.length; i++) { 78 | if (controlled[i] !== byController && controlled[i] instanceof Swiper) { 79 | setControlledTranslate(controlled[i]); 80 | } 81 | } 82 | } 83 | else if (controlled instanceof Swiper && byController !== controlled) { 84 | 85 | setControlledTranslate(controlled); 86 | } 87 | }, 88 | setTransition: function (duration, byController) { 89 | var controlled = s.params.control; 90 | var i; 91 | function setControlledTransition(c) { 92 | c.setWrapperTransition(duration, s); 93 | if (duration !== 0) { 94 | c.onTransitionStart(); 95 | c.wrapper.transitionEnd(function(){ 96 | if (!controlled) return; 97 | if (c.params.loop && s.params.controlBy === 'slide') { 98 | c.fixLoop(); 99 | } 100 | c.onTransitionEnd(); 101 | 102 | }); 103 | } 104 | } 105 | if (s.isArray(controlled)) { 106 | for (i = 0; i < controlled.length; i++) { 107 | if (controlled[i] !== byController && controlled[i] instanceof Swiper) { 108 | setControlledTransition(controlled[i]); 109 | } 110 | } 111 | } 112 | else if (controlled instanceof Swiper && byController !== controlled) { 113 | setControlledTransition(controlled); 114 | } 115 | } 116 | }; -------------------------------------------------------------------------------- /src/js/lazy-load.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Images Lazy Loading 3 | ===========================*/ 4 | s.lazy = { 5 | initialImageLoaded: false, 6 | loadImageInSlide: function (index, loadInDuplicate) { 7 | if (typeof index === 'undefined') return; 8 | if (typeof loadInDuplicate === 'undefined') loadInDuplicate = true; 9 | if (s.slides.length === 0) return; 10 | 11 | var slide = s.slides.eq(index); 12 | var img = slide.find('.swiper-lazy:not(.swiper-lazy-loaded):not(.swiper-lazy-loading)'); 13 | if (slide.hasClass('swiper-lazy') && !slide.hasClass('swiper-lazy-loaded') && !slide.hasClass('swiper-lazy-loading')) { 14 | img = img.add(slide[0]); 15 | } 16 | if (img.length === 0) return; 17 | 18 | img.each(function () { 19 | var _img = $(this); 20 | _img.addClass('swiper-lazy-loading'); 21 | var background = _img.attr('data-background'); 22 | var src = _img.attr('data-src'), 23 | srcset = _img.attr('data-srcset'); 24 | s.loadImage(_img[0], (src || background), srcset, false, function () { 25 | if (background) { 26 | _img.css('background-image', 'url("' + background + '")'); 27 | _img.removeAttr('data-background'); 28 | } 29 | else { 30 | if (srcset) { 31 | _img.attr('srcset', srcset); 32 | _img.removeAttr('data-srcset'); 33 | } 34 | if (src) { 35 | _img.attr('src', src); 36 | _img.removeAttr('data-src'); 37 | } 38 | 39 | } 40 | 41 | _img.addClass('swiper-lazy-loaded').removeClass('swiper-lazy-loading'); 42 | slide.find('.swiper-lazy-preloader, .preloader').remove(); 43 | if (s.params.loop && loadInDuplicate) { 44 | var slideOriginalIndex = slide.attr('data-swiper-slide-index'); 45 | if (slide.hasClass(s.params.slideDuplicateClass)) { 46 | var originalSlide = s.wrapper.children('[data-swiper-slide-index="' + slideOriginalIndex + '"]:not(.' + s.params.slideDuplicateClass + ')'); 47 | s.lazy.loadImageInSlide(originalSlide.index(), false); 48 | } 49 | else { 50 | var duplicatedSlide = s.wrapper.children('.' + s.params.slideDuplicateClass + '[data-swiper-slide-index="' + slideOriginalIndex + '"]'); 51 | s.lazy.loadImageInSlide(duplicatedSlide.index(), false); 52 | } 53 | } 54 | s.emit('onLazyImageReady', s, slide[0], _img[0]); 55 | }); 56 | 57 | s.emit('onLazyImageLoad', s, slide[0], _img[0]); 58 | }); 59 | 60 | }, 61 | load: function () { 62 | var i; 63 | if (s.params.watchSlidesVisibility) { 64 | s.wrapper.children('.' + s.params.slideVisibleClass).each(function () { 65 | s.lazy.loadImageInSlide($(this).index()); 66 | }); 67 | } 68 | else { 69 | if (s.params.slidesPerView > 1) { 70 | for (i = s.activeIndex; i < s.activeIndex + s.params.slidesPerView ; i++) { 71 | if (s.slides[i]) s.lazy.loadImageInSlide(i); 72 | } 73 | } 74 | else { 75 | s.lazy.loadImageInSlide(s.activeIndex); 76 | } 77 | } 78 | if (s.params.lazyLoadingInPrevNext) { 79 | if (s.params.slidesPerView > 1 || (s.params.lazyLoadingInPrevNextAmount && s.params.lazyLoadingInPrevNextAmount > 1)) { 80 | var amount = s.params.lazyLoadingInPrevNextAmount; 81 | var spv = s.params.slidesPerView; 82 | var maxIndex = Math.min(s.activeIndex + spv + Math.max(amount, spv), s.slides.length); 83 | var minIndex = Math.max(s.activeIndex - Math.max(spv, amount), 0); 84 | // Next Slides 85 | for (i = s.activeIndex + s.params.slidesPerView; i < maxIndex; i++) { 86 | if (s.slides[i]) s.lazy.loadImageInSlide(i); 87 | } 88 | // Prev Slides 89 | for (i = minIndex; i < s.activeIndex ; i++) { 90 | if (s.slides[i]) s.lazy.loadImageInSlide(i); 91 | } 92 | } 93 | else { 94 | var nextSlide = s.wrapper.children('.' + s.params.slideNextClass); 95 | if (nextSlide.length > 0) s.lazy.loadImageInSlide(nextSlide.index()); 96 | 97 | var prevSlide = s.wrapper.children('.' + s.params.slidePrevClass); 98 | if (prevSlide.length > 0) s.lazy.loadImageInSlide(prevSlide.index()); 99 | } 100 | } 101 | }, 102 | onTransitionStart: function () { 103 | if (s.params.lazyLoading) { 104 | if (s.params.lazyLoadingOnTransitionStart || (!s.params.lazyLoadingOnTransitionStart && !s.lazy.initialImageLoaded)) { 105 | s.lazy.load(); 106 | } 107 | } 108 | }, 109 | onTransitionEnd: function () { 110 | if (s.params.lazyLoading && !s.params.lazyLoadingOnTransitionStart) { 111 | s.lazy.load(); 112 | } 113 | } 114 | }; 115 | -------------------------------------------------------------------------------- /src/less/navigation.less: -------------------------------------------------------------------------------- 1 | /* Arrows */ 2 | .swiper-button-prev, .swiper-button-next { 3 | position: absolute; 4 | top: 50%; 5 | width: 27px; 6 | height: 44px; 7 | margin-top: -22px; 8 | z-index: 10; 9 | cursor: pointer; 10 | -moz-background-size: 27px 44px; 11 | -webkit-background-size: 27px 44px; 12 | background-size: 27px 44px; 13 | background-position: center; 14 | background-repeat: no-repeat; 15 | &.swiper-button-disabled { 16 | opacity: 0.35; 17 | cursor: auto; 18 | pointer-events: none; 19 | } 20 | } 21 | .swiper-button-prev, .swiper-container-rtl .swiper-button-next { 22 | .encoded-svg-background(""); 23 | left: 10px; 24 | right: auto; 25 | &.swiper-button-black { 26 | .encoded-svg-background(""); 27 | } 28 | &.swiper-button-white { 29 | .encoded-svg-background(""); 30 | } 31 | } 32 | .swiper-button-next, .swiper-container-rtl .swiper-button-prev { 33 | .encoded-svg-background(""); 34 | right: 10px; 35 | left: auto; 36 | &.swiper-button-black { 37 | .encoded-svg-background(""); 38 | } 39 | &.swiper-button-white { 40 | .encoded-svg-background(""); 41 | } 42 | } 43 | /* Pagination Styles */ 44 | .swiper-pagination { 45 | position: absolute; 46 | text-align: center; 47 | -webkit-transition: 300ms; 48 | -moz-transition: 300ms; 49 | -o-transition: 300ms; 50 | transition: 300ms; 51 | -webkit-transform: translate3d(0,0,0); 52 | -ms-transform: translate3d(0,0,0); 53 | -o-transform: translate3d(0,0,0); 54 | transform: translate3d(0,0,0); 55 | z-index: 10; 56 | &.swiper-pagination-hidden { 57 | opacity: 0; 58 | } 59 | } 60 | /* Common Styles */ 61 | .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ 62 | bottom: 10px; 63 | left: 0; 64 | width: 100%; 65 | } 66 | /* Bullets */ 67 | .swiper-pagination-bullet { 68 | width: 8px; 69 | height: 8px; 70 | display: inline-block; 71 | border-radius: 100%; 72 | background: #000; 73 | opacity: 0.2; 74 | button& { 75 | border: none; 76 | margin: 0; 77 | padding: 0; 78 | box-shadow: none; 79 | -moz-appearance: none; 80 | -ms-appearance: none; 81 | -webkit-appearance: none; 82 | appearance: none; 83 | } 84 | .swiper-pagination-clickable & { 85 | cursor: pointer; 86 | } 87 | .swiper-pagination-white & { 88 | background: #fff; 89 | } 90 | } 91 | .swiper-pagination-bullet-active { 92 | opacity: 1; 93 | background: #007aff; 94 | .swiper-pagination-white & { 95 | background: #fff; 96 | } 97 | .swiper-pagination-black & { 98 | background: #000; 99 | } 100 | } 101 | .swiper-container-vertical { 102 | > .swiper-pagination-bullets { 103 | right: 10px; 104 | top: 50%; 105 | -webkit-transform:translate3d(0px,-50%,0); 106 | -moz-transform:translate3d(0px,-50%,0); 107 | -o-transform:translate(0px,-50%); 108 | -ms-transform:translate3d(0px,-50%,0); 109 | transform:translate3d(0px,-50%,0); 110 | .swiper-pagination-bullet { 111 | margin: 5px 0; 112 | display: block; 113 | } 114 | } 115 | } 116 | .swiper-container-horizontal { 117 | > .swiper-pagination-bullets { 118 | .swiper-pagination-bullet { 119 | margin: 0 5px; 120 | } 121 | } 122 | } 123 | /* Progress */ 124 | .swiper-pagination-progress { 125 | background: rgba(0,0,0,0.25); 126 | position: absolute; 127 | .swiper-pagination-progressbar { 128 | background: #007aff; 129 | position: absolute; 130 | left: 0; 131 | top: 0; 132 | width: 100%; 133 | height: 100%; 134 | -webkit-transform: scale(0); 135 | -ms-transform: scale(0); 136 | -o-transform: scale(0); 137 | transform: scale(0); 138 | -webkit-transform-origin: left top; 139 | -moz-transform-origin: left top; 140 | -ms-transform-origin: left top; 141 | -o-transform-origin: left top; 142 | transform-origin: left top; 143 | } 144 | .swiper-container-rtl & .swiper-pagination-progressbar { 145 | -webkit-transform-origin: right top; 146 | -moz-transform-origin: right top; 147 | -ms-transform-origin: right top; 148 | -o-transform-origin: right top; 149 | transform-origin: right top; 150 | } 151 | .swiper-container-horizontal > & { 152 | width: 100%; 153 | height: 4px; 154 | left: 0; 155 | top: 0; 156 | } 157 | .swiper-container-vertical > & { 158 | width: 4px; 159 | height: 100%; 160 | left: 0; 161 | top: 0; 162 | } 163 | &.swiper-pagination-white { 164 | background: rgba(255,255,255,0.5); 165 | .swiper-pagination-progressbar { 166 | background: #fff; 167 | } 168 | } 169 | &.swiper-pagination-black { 170 | .swiper-pagination-progressbar { 171 | background: #000; 172 | } 173 | } 174 | } -------------------------------------------------------------------------------- /src/less/effects.less: -------------------------------------------------------------------------------- 1 | /* 3D Container */ 2 | .swiper-container-3d { 3 | -webkit-perspective: 1200px; 4 | -moz-perspective: 1200px; 5 | -o-perspective: 1200px; 6 | perspective: 1200px; 7 | .swiper-wrapper, .swiper-slide, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-cube-shadow { 8 | .preserve3d(); 9 | } 10 | .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom { 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | width: 100%; 15 | height: 100%; 16 | pointer-events: none; 17 | z-index: 10; 18 | } 19 | .swiper-slide-shadow-left { 20 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */ 21 | background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 22 | background-image: -moz-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */ 23 | background-image: -o-linear-gradient(right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */ 24 | background-image: linear-gradient(to left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */ 25 | } 26 | .swiper-slide-shadow-right { 27 | background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */ 28 | background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 29 | background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */ 30 | background-image: -o-linear-gradient(left, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */ 31 | background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */ 32 | } 33 | .swiper-slide-shadow-top { 34 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */ 35 | background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 36 | background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */ 37 | background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */ 38 | background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */ 39 | } 40 | .swiper-slide-shadow-bottom { 41 | background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0))); /* Safari 4+, Chrome */ 42 | background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ 43 | background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 3.6-15 */ 44 | background-image: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Opera 11.10-12.00 */ 45 | background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); /* Firefox 16+, IE10, Opera 12.50+ */ 46 | } 47 | } 48 | /* Coverflow */ 49 | .swiper-container-coverflow, .swiper-container-flip { 50 | .swiper-wrapper { 51 | /* Windows 8 IE 10 fix */ 52 | -ms-perspective:1200px; 53 | } 54 | } 55 | /* Cube + Flip */ 56 | .swiper-container-cube, .swiper-container-flip { 57 | overflow: visible; 58 | .swiper-slide { 59 | pointer-events: none; 60 | -webkit-backface-visibility: hidden; 61 | -moz-backface-visibility: hidden; 62 | -ms-backface-visibility: hidden; 63 | backface-visibility: hidden; 64 | z-index: 1; 65 | .swiper-slide { 66 | pointer-events: none; 67 | } 68 | } 69 | .swiper-slide-active { 70 | &, & .swiper-slide-active { 71 | pointer-events: auto; 72 | } 73 | } 74 | .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right { 75 | z-index: 0; 76 | -webkit-backface-visibility: hidden; 77 | -moz-backface-visibility: hidden; 78 | -ms-backface-visibility: hidden; 79 | backface-visibility: hidden; 80 | } 81 | } 82 | /* Cube */ 83 | .swiper-container-cube { 84 | .swiper-slide { 85 | visibility: hidden; 86 | -webkit-transform-origin: 0 0; 87 | -moz-transform-origin: 0 0; 88 | -ms-transform-origin: 0 0; 89 | transform-origin: 0 0; 90 | width: 100%; 91 | height: 100%; 92 | } 93 | &.swiper-container-rtl .swiper-slide{ 94 | -webkit-transform-origin: 100% 0; 95 | -moz-transform-origin: 100% 0; 96 | -ms-transform-origin: 100% 0; 97 | transform-origin: 100% 0; 98 | } 99 | .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev, .swiper-slide-next + .swiper-slide { 100 | pointer-events: auto; 101 | visibility: visible; 102 | } 103 | .swiper-cube-shadow { 104 | position: absolute; 105 | left: 0; 106 | bottom: 0px; 107 | width: 100%; 108 | height: 100%; 109 | background: #000; 110 | opacity: 0.6; 111 | -webkit-filter: blur(50px); 112 | filter: blur(50px); 113 | z-index: 0; 114 | } 115 | } 116 | /* Fade */ 117 | .swiper-container-fade { 118 | &.swiper-container-free-mode { 119 | .swiper-slide { 120 | -webkit-transition-timing-function: ease-out; 121 | -moz-transition-timing-function: ease-out; 122 | -ms-transition-timing-function: ease-out; 123 | -o-transition-timing-function: ease-out; 124 | transition-timing-function: ease-out; 125 | } 126 | } 127 | .swiper-slide { 128 | pointer-events: none; 129 | -webkit-transition-property: opacity; 130 | -moz-transition-property: opacity; 131 | -o-transition-property: opacity; 132 | transition-property: opacity; 133 | .swiper-slide { 134 | pointer-events: none; 135 | } 136 | } 137 | .swiper-slide-active { 138 | &, & .swiper-slide-active { 139 | pointer-events: auto; 140 | } 141 | } 142 | } -------------------------------------------------------------------------------- /src/js/scrollbar.js: -------------------------------------------------------------------------------- 1 | /*========================= 2 | Scrollbar 3 | ===========================*/ 4 | s.scrollbar = { 5 | isTouched: false, 6 | setDragPosition: function (e) { 7 | var sb = s.scrollbar; 8 | var x = 0, y = 0; 9 | var translate; 10 | var pointerPosition = s.isHorizontal() ? 11 | ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageX : e.pageX || e.clientX) : 12 | ((e.type === 'touchstart' || e.type === 'touchmove') ? e.targetTouches[0].pageY : e.pageY || e.clientY) ; 13 | var position = (pointerPosition) - sb.track.offset()[s.isHorizontal() ? 'left' : 'top'] - sb.dragSize / 2; 14 | var positionMin = -s.minTranslate() * sb.moveDivider; 15 | var positionMax = -s.maxTranslate() * sb.moveDivider; 16 | if (position < positionMin) { 17 | position = positionMin; 18 | } 19 | else if (position > positionMax) { 20 | position = positionMax; 21 | } 22 | position = -position / sb.moveDivider; 23 | s.updateProgress(position); 24 | s.setWrapperTranslate(position, true); 25 | }, 26 | dragStart: function (e) { 27 | var sb = s.scrollbar; 28 | sb.isTouched = true; 29 | e.preventDefault(); 30 | e.stopPropagation(); 31 | 32 | sb.setDragPosition(e); 33 | clearTimeout(sb.dragTimeout); 34 | 35 | sb.track.transition(0); 36 | if (s.params.scrollbarHide) { 37 | sb.track.css('opacity', 1); 38 | } 39 | s.wrapper.transition(100); 40 | sb.drag.transition(100); 41 | s.emit('onScrollbarDragStart', s); 42 | }, 43 | dragMove: function (e) { 44 | var sb = s.scrollbar; 45 | if (!sb.isTouched) return; 46 | if (e.preventDefault) e.preventDefault(); 47 | else e.returnValue = false; 48 | sb.setDragPosition(e); 49 | s.wrapper.transition(0); 50 | sb.track.transition(0); 51 | sb.drag.transition(0); 52 | s.emit('onScrollbarDragMove', s); 53 | }, 54 | dragEnd: function (e) { 55 | var sb = s.scrollbar; 56 | if (!sb.isTouched) return; 57 | sb.isTouched = false; 58 | if (s.params.scrollbarHide) { 59 | clearTimeout(sb.dragTimeout); 60 | sb.dragTimeout = setTimeout(function () { 61 | sb.track.css('opacity', 0); 62 | sb.track.transition(400); 63 | }, 1000); 64 | 65 | } 66 | s.emit('onScrollbarDragEnd', s); 67 | if (s.params.scrollbarSnapOnRelease) { 68 | s.slideReset(); 69 | } 70 | }, 71 | enableDraggable: function () { 72 | var sb = s.scrollbar; 73 | var target = s.support.touch ? sb.track : document; 74 | $(sb.track).on(s.touchEvents.start, sb.dragStart); 75 | $(target).on(s.touchEvents.move, sb.dragMove); 76 | $(target).on(s.touchEvents.end, sb.dragEnd); 77 | }, 78 | disableDraggable: function () { 79 | var sb = s.scrollbar; 80 | var target = s.support.touch ? sb.track : document; 81 | $(sb.track).off(s.touchEvents.start, sb.dragStart); 82 | $(target).off(s.touchEvents.move, sb.dragMove); 83 | $(target).off(s.touchEvents.end, sb.dragEnd); 84 | }, 85 | set: function () { 86 | if (!s.params.scrollbar) return; 87 | var sb = s.scrollbar; 88 | sb.track = $(s.params.scrollbar); 89 | if (s.params.uniqueNavElements && typeof s.params.scrollbar === 'string' && sb.track.length > 1 && s.container.find(s.params.scrollbar).length === 1) { 90 | sb.track = s.container.find(s.params.scrollbar); 91 | } 92 | sb.drag = sb.track.find('.swiper-scrollbar-drag'); 93 | if (sb.drag.length === 0) { 94 | sb.drag = $('
'); 95 | sb.track.append(sb.drag); 96 | } 97 | sb.drag[0].style.width = ''; 98 | sb.drag[0].style.height = ''; 99 | sb.trackSize = s.isHorizontal() ? sb.track[0].offsetWidth : sb.track[0].offsetHeight; 100 | 101 | sb.divider = s.size / s.virtualSize; 102 | sb.moveDivider = sb.divider * (sb.trackSize / s.size); 103 | sb.dragSize = sb.trackSize * sb.divider; 104 | 105 | if (s.isHorizontal()) { 106 | sb.drag[0].style.width = sb.dragSize + 'px'; 107 | } 108 | else { 109 | sb.drag[0].style.height = sb.dragSize + 'px'; 110 | } 111 | 112 | if (sb.divider >= 1) { 113 | sb.track[0].style.display = 'none'; 114 | } 115 | else { 116 | sb.track[0].style.display = ''; 117 | } 118 | if (s.params.scrollbarHide) { 119 | sb.track[0].style.opacity = 0; 120 | } 121 | }, 122 | setTranslate: function () { 123 | if (!s.params.scrollbar) return; 124 | var diff; 125 | var sb = s.scrollbar; 126 | var translate = s.translate || 0; 127 | var newPos; 128 | 129 | var newSize = sb.dragSize; 130 | newPos = (sb.trackSize - sb.dragSize) * s.progress; 131 | if (s.rtl && s.isHorizontal()) { 132 | newPos = -newPos; 133 | if (newPos > 0) { 134 | newSize = sb.dragSize - newPos; 135 | newPos = 0; 136 | } 137 | else if (-newPos + sb.dragSize > sb.trackSize) { 138 | newSize = sb.trackSize + newPos; 139 | } 140 | } 141 | else { 142 | if (newPos < 0) { 143 | newSize = sb.dragSize + newPos; 144 | newPos = 0; 145 | } 146 | else if (newPos + sb.dragSize > sb.trackSize) { 147 | newSize = sb.trackSize - newPos; 148 | } 149 | } 150 | if (s.isHorizontal()) { 151 | if (s.support.transforms3d) { 152 | sb.drag.transform('translate3d(' + (newPos) + 'px, 0, 0)'); 153 | } 154 | else { 155 | sb.drag.transform('translateX(' + (newPos) + 'px)'); 156 | } 157 | sb.drag[0].style.width = newSize + 'px'; 158 | } 159 | else { 160 | if (s.support.transforms3d) { 161 | sb.drag.transform('translate3d(0px, ' + (newPos) + 'px, 0)'); 162 | } 163 | else { 164 | sb.drag.transform('translateY(' + (newPos) + 'px)'); 165 | } 166 | sb.drag[0].style.height = newSize + 'px'; 167 | } 168 | if (s.params.scrollbarHide) { 169 | clearTimeout(sb.timeout); 170 | sb.track[0].style.opacity = 1; 171 | sb.timeout = setTimeout(function () { 172 | sb.track[0].style.opacity = 0; 173 | sb.track.transition(400); 174 | }, 1000); 175 | } 176 | }, 177 | setTransition: function (duration) { 178 | if (!s.params.scrollbar) return; 179 | s.scrollbar.drag.transition(duration); 180 | } 181 | }; -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 1 14 |
15 |
16 | 2 17 |
18 |
19 | 3 20 |
21 |
22 | 23 |
24 | 25 | 91 | 263 | 264 | 265 | -------------------------------------------------------------------------------- /demos/32-scroll-container.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Swiper demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 37 | 38 | 39 | 40 |
41 |
42 |
43 |

Scroll Container

44 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.

45 |

Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.

46 |

Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.

47 |

Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.

48 |

Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.

49 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolor lectus eu libero. Vestibulum venenatis eget turpis sed faucibus. Maecenas in ullamcorper orci, eu ullamcorper sem. Etiam elit ante, luctus non ante sit amet, sodales vulputate odio. Aenean tristique nisl tellus, sit amet fringilla nisl volutpat cursus. Quisque dignissim lectus ac nunc consectetur mattis. Proin vel hendrerit ipsum, et lobortis dolor. Vestibulum convallis, nibh et tincidunt tristique, nisl risus facilisis lectus, ut interdum orci nisl ac nunc. Cras et aliquam felis. Quisque vel ipsum at elit sodales posuere eget non est. Fusce convallis vestibulum dolor non volutpat. Vivamus vestibulum quam ut ultricies pretium.

50 |

Suspendisse rhoncus fringilla nisl. Mauris eget lorem ac urna consectetur convallis non vel mi. Donec libero dolor, volutpat ut urna sit amet, aliquet molestie purus. Phasellus faucibus, leo vel scelerisque lobortis, ipsum leo sollicitudin metus, eget sagittis ante orci eu ipsum. Nulla ac mauris eu risus sagittis scelerisque iaculis bibendum mauris. Cras ut egestas orci. Cras odio risus, sagittis ut nunc vitae, aliquam consectetur purus. Vivamus ornare nunc vel tellus facilisis, quis dictum elit tincidunt. Donec accumsan nisi at laoreet sodales. Cras at ullamcorper massa. Maecenas at facilisis ex. Nam mollis dignissim purus id efficitur.

51 |

Curabitur eget aliquam erat. Curabitur a neque vitae purus volutpat elementum. Vivamus quis vestibulum leo, efficitur ullamcorper velit. Integer tincidunt finibus metus vel porta. Mauris sed mauris congue, pretium est nec, malesuada purus. Nulla hendrerit consectetur arcu et lacinia. Suspendisse augue justo, convallis eget arcu in, pretium tempor ligula. Nullam vulputate tincidunt est ut ullamcorper.

52 |

Curabitur sed sodales leo. Nulla facilisi. Etiam condimentum, nisi id tempor vulputate, nisi justo cursus justo, pellentesque condimentum diam arcu sit amet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In placerat tellus a posuere vehicula. Donec diam massa, efficitur vitae mattis et, pretium in augue. Fusce iaculis mi quis ante venenatis, sit amet pellentesque orci aliquam. Vestibulum elementum posuere vehicula.

53 |

Sed tincidunt diam a massa pharetra faucibus. Praesent condimentum id arcu nec fringilla. Maecenas faucibus, ante et venenatis interdum, erat mi eleifend dui, at convallis nisl est nec arcu. Duis vitae arcu rhoncus, faucibus magna ut, tempus metus. Cras in nibh sed ipsum consequat rhoncus. Proin fringilla nulla ut augue tempor fermentum. Nunc hendrerit non nisi vitae finibus. Donec eget ornare libero. Aliquam auctor erat enim, a semper risus semper at. In ut dui in metus tincidunt euismod eget et lacus. Aenean et dictum urna, sed rhoncus lorem. Duis pharetra sagittis odio. Etiam a libero ut nisi feugiat tincidunt vel vitae turpis. Maecenas vel orci sit amet lorem hendrerit venenatis sollicitudin ut dui. Quisque rhoncus nibh in massa pretium scelerisque.

54 |
55 |
56 | 57 |
58 |
59 | 60 | 61 | 62 | 63 | 64 | 73 | 74 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 'use strict'; 3 | var gulp = require('gulp'), 4 | connect = require('gulp-connect'), 5 | open = require('gulp-open'), 6 | less = require('gulp-less'), 7 | rename = require('gulp-rename'), 8 | header = require('gulp-header'), 9 | path = require('path'), 10 | uglify = require('gulp-uglify'), 11 | sourcemaps = require('gulp-sourcemaps'), 12 | minifyCSS = require('gulp-minify-css'), 13 | tap = require('gulp-tap'), 14 | concat = require('gulp-concat'), 15 | jshint = require('gulp-jshint'), 16 | stylish = require('jshint-stylish'), 17 | fs = require('fs'), 18 | paths = { 19 | root: './', 20 | build: { 21 | root: 'build/', 22 | styles: 'build/css/', 23 | scripts: 'build/js/' 24 | }, 25 | dist: { 26 | root: 'dist/', 27 | styles: 'dist/css/', 28 | scripts: 'dist/js/' 29 | }, 30 | playground: { 31 | root: 'playground/' 32 | }, 33 | source: { 34 | root: 'src/', 35 | styles: 'src/less/', 36 | scripts: 'src/js/*.js' 37 | }, 38 | }, 39 | swiper = { 40 | filename: 'swiper', 41 | jsFiles: [ 42 | 'src/js/wrap-start.js', 43 | 'src/js/swiper-intro.js', 44 | 'src/js/core.js', 45 | 'src/js/effects.js', 46 | 'src/js/lazy-load.js', 47 | 'src/js/scrollbar.js', 48 | 'src/js/controller.js', 49 | 'src/js/hashnav.js', 50 | 'src/js/keyboard.js', 51 | 'src/js/mousewheel.js', 52 | 'src/js/parallax.js', 53 | 'src/js/plugins.js', 54 | 'src/js/emitter.js', 55 | 'src/js/a11y.js', 56 | 'src/js/init.js', 57 | 'src/js/swiper-outro.js', 58 | 'src/js/swiper-proto.js', 59 | 'src/js/dom.js', 60 | 'src/js/get-dom-lib.js', 61 | 'src/js/dom-plugins.js', 62 | 'src/js/wrap-end.js', 63 | 'src/js/amd.js' 64 | ], 65 | jQueryFiles : [ 66 | 'src/js/wrap-start.js', 67 | 'src/js/swiper-intro.js', 68 | 'src/js/core.js', 69 | 'src/js/effects.js', 70 | 'src/js/lazy-load.js', 71 | 'src/js/scrollbar.js', 72 | 'src/js/controller.js', 73 | 'src/js/hashnav.js', 74 | 'src/js/keyboard.js', 75 | 'src/js/mousewheel.js', 76 | 'src/js/parallax.js', 77 | 'src/js/plugins.js', 78 | 'src/js/emitter.js', 79 | 'src/js/a11y.js', 80 | 'src/js/init.js', 81 | 'src/js/swiper-outro.js', 82 | 'src/js/swiper-proto.js', 83 | 'src/js/get-dom-lib.js', 84 | 'src/js/dom-plugins.js', 85 | 'src/js/wrap-end.js', 86 | 'src/js/amd.js' 87 | ], 88 | jQueryUMDFiles : [ 89 | 'src/js/wrap-start-umd.js', 90 | 'src/js/swiper-intro.js', 91 | 'src/js/core.js', 92 | 'src/js/effects.js', 93 | 'src/js/lazy-load.js', 94 | 'src/js/scrollbar.js', 95 | 'src/js/controller.js', 96 | 'src/js/hashnav.js', 97 | 'src/js/keyboard.js', 98 | 'src/js/mousewheel.js', 99 | 'src/js/parallax.js', 100 | 'src/js/plugins.js', 101 | 'src/js/emitter.js', 102 | 'src/js/a11y.js', 103 | 'src/js/init.js', 104 | 'src/js/swiper-outro.js', 105 | 'src/js/swiper-proto.js', 106 | 'src/js/get-jquery.js', 107 | 'src/js/dom-plugins.js', 108 | 'src/js/wrap-end-umd.js', 109 | ], 110 | Framework7Files : [ 111 | 'src/js/swiper-intro-f7.js', 112 | 'src/js/core.js', 113 | 'src/js/effects.js', 114 | 'src/js/lazy-load.js', 115 | 'src/js/scrollbar.js', 116 | 'src/js/controller.js', 117 | 'src/js/parallax.js', 118 | 'src/js/plugins.js', 119 | 'src/js/emitter.js', 120 | 'src/js/a11y.js', 121 | 'src/js/init.js', 122 | 'src/js/swiper-outro.js', 123 | 'src/js/swiper-proto.js', 124 | ], 125 | pkg: require('./bower.json'), 126 | banner: [ 127 | '/**', 128 | ' * Swiper <%= pkg.version %>', 129 | ' * <%= pkg.description %>', 130 | ' * ', 131 | ' * <%= pkg.homepage %>', 132 | ' * ', 133 | ' * Copyright <%= date.year %>, <%= pkg.author %>', 134 | ' * The iDangero.us', 135 | ' * http://www.idangero.us/', 136 | ' * ', 137 | ' * Licensed under <%= pkg.license.join(" & ") %>', 138 | ' * ', 139 | ' * Released on: <%= date.month %> <%= date.day %>, <%= date.year %>', 140 | ' */', 141 | ''].join('\n'), 142 | date: { 143 | year: new Date().getFullYear(), 144 | month: ('January February March April May June July August September October November December').split(' ')[new Date().getMonth()], 145 | day: new Date().getDate() 146 | } 147 | }; 148 | 149 | function addJSIndent (file, t, minusIndent) { 150 | var addIndent = ' '; 151 | var filename = file.path.split('src/js/')[1]; 152 | if (['wrap-start.js', 'wrap-start-umd.js', 'wrap-end.js', 'wrap-end-umd.js', 'amd.js'].indexOf(filename) !== -1) { 153 | addIndent = ''; 154 | } 155 | if (filename === 'swiper-intro.js' || filename === 'swiper-intro-f7.js' || filename === 'swiper-outro.js' || filename === 'dom.js' || filename === 'get-dom-lib.js' || filename === 'get-jquery.js' || filename === 'dom-plugins.js' || filename === 'swiper-proto.js') addIndent = ' '; 156 | if (minusIndent) { 157 | addIndent = addIndent.substring(4); 158 | } 159 | if (addIndent !== '') { 160 | var fileLines = fs.readFileSync(file.path).toString().split('\n'); 161 | var newFileContents = ''; 162 | for (var i = 0; i < fileLines.length; i++) { 163 | newFileContents += addIndent + fileLines[i] + (i === fileLines.length ? '' : '\n'); 164 | } 165 | file.contents = new Buffer(newFileContents); 166 | } 167 | } 168 | gulp.task('scripts', function (cb) { 169 | gulp.src(swiper.jsFiles) 170 | .pipe(tap(function (file, t){ 171 | addJSIndent (file, t); 172 | })) 173 | .pipe(sourcemaps.init()) 174 | .pipe(concat(swiper.filename + '.js')) 175 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 176 | .pipe(jshint()) 177 | .pipe(jshint.reporter(stylish)) 178 | .pipe(sourcemaps.write('./maps/')) 179 | .pipe(gulp.dest(paths.build.scripts)); 180 | 181 | 182 | gulp.src(swiper.jQueryFiles) 183 | .pipe(tap(function (file, t){ 184 | addJSIndent (file, t); 185 | })) 186 | .pipe(sourcemaps.init()) 187 | .pipe(concat(swiper.filename + '.jquery.js')) 188 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 189 | .pipe(sourcemaps.write('./maps/')) 190 | .pipe(gulp.dest(paths.build.scripts)); 191 | gulp.src(swiper.jQueryUMDFiles) 192 | .pipe(tap(function (file, t){ 193 | addJSIndent (file, t); 194 | })) 195 | .pipe(sourcemaps.init()) 196 | .pipe(concat(swiper.filename + '.jquery.umd.js')) 197 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 198 | .pipe(sourcemaps.write('./maps/')) 199 | .pipe(gulp.dest(paths.build.scripts)); 200 | gulp.src(swiper.Framework7Files) 201 | .pipe(tap(function (file, t){ 202 | addJSIndent (file, t, true); 203 | })) 204 | .pipe(sourcemaps.init()) 205 | .pipe(concat(swiper.filename + '.framework7.js')) 206 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 207 | .pipe(sourcemaps.write('./maps/')) 208 | .pipe(gulp.dest(paths.build.scripts)) 209 | .pipe(connect.reload()); 210 | cb(); 211 | }); 212 | gulp.task('styles', function (cb) { 213 | 214 | gulp.src(paths.source.styles + 'swiper.less') 215 | .pipe(less({ 216 | paths: [ path.join(__dirname, 'less', 'includes') ] 217 | })) 218 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date })) 219 | .pipe(rename(function(path) { 220 | path.basename = swiper.filename; 221 | })) 222 | .pipe(gulp.dest(paths.build.styles)) 223 | .pipe(connect.reload()); 224 | 225 | gulp.src([ 226 | paths.source.styles + 'core.less', 227 | paths.source.styles + 'navigation-f7.less', 228 | paths.source.styles + 'effects.less', 229 | paths.source.styles + 'scrollbar.less', 230 | paths.source.styles + 'preloader-f7.less', 231 | ]) 232 | .pipe(concat(swiper.filename + '.framework7.less')) 233 | .pipe(header('/* === Swiper === */\n')) 234 | .pipe(gulp.dest(paths.build.styles)); 235 | cb(); 236 | }); 237 | gulp.task('build', ['scripts', 'styles'], function (cb) { 238 | cb(); 239 | }); 240 | 241 | gulp.task('dist', function () { 242 | gulp.src([paths.build.scripts + swiper.filename + '.js']) 243 | .pipe(gulp.dest(paths.dist.scripts)) 244 | .pipe(sourcemaps.init()) 245 | .pipe(uglify()) 246 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date })) 247 | .pipe(rename(function(path) { 248 | path.basename = swiper.filename + '.min'; 249 | })) 250 | .pipe(sourcemaps.write('./maps')) 251 | .pipe(gulp.dest(paths.dist.scripts)); 252 | 253 | gulp.src([paths.build.scripts + swiper.filename + '.jquery.js']) 254 | .pipe(gulp.dest(paths.dist.scripts)) 255 | .pipe(sourcemaps.init()) 256 | .pipe(uglify()) 257 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 258 | .pipe(rename(function(path) { 259 | path.basename = swiper.filename + '.jquery.min'; 260 | })) 261 | .pipe(sourcemaps.write('./maps')) 262 | .pipe(gulp.dest(paths.dist.scripts)); 263 | 264 | gulp.src([paths.build.scripts + swiper.filename + '.jquery.umd.js']) 265 | .pipe(gulp.dest(paths.dist.scripts)) 266 | .pipe(sourcemaps.init()) 267 | .pipe(uglify()) 268 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date } )) 269 | .pipe(rename(function(path) { 270 | path.basename = swiper.filename + '.jquery.umd.min'; 271 | })) 272 | .pipe(sourcemaps.write('./maps')) 273 | .pipe(gulp.dest(paths.dist.scripts)); 274 | 275 | gulp.src(paths.build.styles + '*.css') 276 | .pipe(gulp.dest(paths.dist.styles)) 277 | .pipe(minifyCSS({ 278 | advanced: false, 279 | aggressiveMerging: false, 280 | })) 281 | .pipe(header(swiper.banner, { pkg : swiper.pkg, date: swiper.date })) 282 | .pipe(rename(function(path) { 283 | path.basename = swiper.filename + '.min'; 284 | })) 285 | .pipe(gulp.dest(paths.dist.styles)); 286 | }); 287 | 288 | gulp.task('watch', function () { 289 | gulp.watch(paths.source.scripts, [ 'scripts' ]); 290 | gulp.watch(paths.source.styles + '*.less', [ 'styles' ]); 291 | }); 292 | 293 | gulp.task('connect', function () { 294 | return connect.server({ 295 | root: [ paths.root ], 296 | livereload: true, 297 | port:'3000' 298 | }); 299 | }); 300 | 301 | gulp.task('open', function () { 302 | return gulp.src(paths.playground.root + 'index.html').pipe(open({ uri: 'http://localhost:3000/' + paths.playground.root + 'index.html'})); 303 | }); 304 | 305 | gulp.task('server', [ 'watch', 'connect', 'open' ]); 306 | 307 | gulp.task('default', [ 'server' ]); 308 | })(); 309 | --------------------------------------------------------------------------------