82 | var element = document.getElementById('mySwipe');
83 | window.mySwipe = Swipe(element, {
84 | startSlide: 0,
85 | auto: 3000,
86 | autoRestart: true,
87 | continuous: true,
88 | disableScroll: true,
89 | stopPropagation: true,
90 | callback: function(index, element) {},
91 | transitionEnd: function(index, element) {}
92 | });
93 |
94 |
100 | window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
101 |
102 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 |
161 | Shoot me a [note](mailto:nickleefly@gmail.com) if you want your logo here
162 |
163 | ## License
164 | Copyright (c) 2015 Brad Birdsall Licensed under the [The MIT License (MIT)](http://opensource.org/licenses/MIT).
165 |
--------------------------------------------------------------------------------
/swipe.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Swipe 2.0
3 | *
4 | * Brad Birdsall and Xiuyu Li
5 | * Copyright 2015, MIT License
6 | *
7 | */
8 |
9 | function Swipe(container, options) {
10 |
11 | "use strict";
12 |
13 | // utilities
14 | var noop = function() {}; // simple no operation function
15 | var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
16 |
17 | // check browser capabilities
18 | var browser = {
19 | addEventListener: !!window.addEventListener,
20 | touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
21 | transitions: (function(temp) {
22 | var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
23 | for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
24 | return false;
25 | })(document.createElement('swipe'))
26 | };
27 |
28 | // quit if no root element
29 | if (!container) return;
30 | var element = container.children[0];
31 | var slides, slidePos, width, length;
32 | options = options || {};
33 | options.bulletWrapperClass = options.bulletWrapperClass ? '.' + options.bulletWrapperClass : '';
34 | var bulletWrapper = options.bulletWrapperClass || null;
35 | var bulletClass = options.bulletClass || 'swipe-bullet';
36 | var activeBulletClass = options.bulletActiveClass || 'active';
37 | var index = parseInt(options.startSlide, 10) || 0;
38 | var position = index;
39 | var clonedSlides = false;
40 | var speed = options.speed || 300;
41 | options.continuous = options.continuous !== undefined ? options.continuous : true;
42 |
43 | // AutoRestart option: auto restart slideshow after user's touch event
44 | options.autoRestart = options.autoRestart !== undefined ? options.autoRestart : true;
45 |
46 | //add a css class to a dom element
47 | function addClassToElem(elem,value){
48 | var rspaces = /\s+/;
49 | var classNames = (value || "").split( rspaces );
50 | var className = " " + elem.className + " ",
51 | setClass = elem.className;
52 | for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
53 |
54 | if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
55 | setClass += " " + classNames[c];
56 | }
57 |
58 | }
59 | elem.className = setClass.replace(/^\s+|\s+$/g,''); //trim
60 | }
61 |
62 | //remove a css class from a dom element
63 | function removeClassFromElem(elem,value){
64 | var rspaces = /\s+/;
65 | var rclass = /[\n\t]/g
66 | var classNames = (value || "").split( rspaces );
67 | var className = (" " + elem.className + " ").replace(rclass, " ");
68 |
69 | for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
70 | className = className.replace(" " + classNames[c] + " ", " ");
71 | }
72 |
73 | elem.className = className.replace(/^\s+|\s+$/g,''); //trim
74 | }
75 |
76 |
77 | function addEventHandler(elem,eventType,handler) {
78 | if (elem.addEventListener)
79 | elem.addEventListener (eventType,handler,false);
80 | else if (elem.attachEvent)
81 | elem.attachEvent ('on'+eventType,handler);
82 | }
83 |
84 | // get the target of a click event, we need this so we have support for multiple browsers
85 | function getTarget(e) {
86 | var clickTarget;
87 | if (e.target) clickTarget = e.target;
88 | else if (e.srcElement) clickTarget = e.srcElement;
89 | if (clickTarget.nodeType == 3) // defeat Safari bug
90 | clickTarget = clickTarget.parentNode;
91 |
92 | return clickTarget;
93 | }
94 |
95 | function setup() {
96 |
97 | // cache slides
98 | slides = element.children;
99 | length = slides.length;
100 |
101 | // set continuous to false if only one slide
102 | if (slides.length < 2) options.continuous = false;
103 |
104 | //special case if two slides
105 | if (browser.transitions && options.continuous && slides.length < 3) {
106 | element.appendChild(slides[0].cloneNode(true));
107 | element.appendChild(element.children[1].cloneNode(true));
108 | slides = element.children;
109 | clonedSlides = true;
110 | }
111 |
112 | // create an array to store current positions of each slide
113 | slidePos = new Array(slides.length);
114 |
115 | // determine width of each slide
116 | width = container.getBoundingClientRect().width || container.offsetWidth;
117 |
118 | element.style.width = (slides.length * width) + 'px';
119 |
120 | // stack elements
121 | var pos = slides.length;
122 |
123 | if (bulletWrapper != null) {
124 |
125 | var bulletWrapperObj = container.querySelector(bulletWrapper);
126 | var bulletInc = 0;
127 | bulletWrapperObj.innerHTML = '';
128 |
129 | }
130 |
131 | while(pos--) {
132 |
133 | var slide = slides[pos];
134 |
135 | slide.style.width = width + 'px';
136 | slide.setAttribute('data-index', pos);
137 |
138 | if (clonedSlides === false || pos <= 1) {
139 | if (bulletWrapperObj) {
140 | bulletWrapperObj.innerHTML += '' + bulletInc + '';
141 | bulletInc++;
142 | }
143 | }
144 |
145 | if (browser.transitions) {
146 | slide.style.left = (pos * -width) + 'px';
147 | move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
148 | }
149 |
150 | }
151 |
152 | // reposition elements before and after index
153 | if (options.continuous && browser.transitions) {
154 | move(circle(index-1), -width, 0);
155 | move(circle(index+1), width, 0);
156 | }
157 |
158 | if (!browser.transitions) element.style.left = (index * -width) + 'px';
159 |
160 | container.style.visibility = 'visible';
161 | container.className = container.className + ' initialised';
162 |
163 | // Need to highlight the bullet assigned to the current slide
164 | // the setup function is called on window resize so we cant highlight the first bullet but the current index
165 | hightlightCurrentBullet(index);
166 | }
167 |
168 | function hightlightCurrentBullet(to){
169 | if (bulletWrapper){
170 |
171 | var bulletWrapperObj = container.querySelector(bulletWrapper);
172 | var childObj = bulletWrapperObj.childNodes;
173 |
174 | for (var i=0;i