Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ module.exports = function( grunt ) {
});

// build
grunt.loadNpmTasks('grunt-contrib');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('build', 'uglify');
grunt.registerTask('default', 'build');

};
21 changes: 21 additions & 0 deletions LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2013 Brad Birdsall

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@ Swipe exposes a few functions that can be useful for script control of your slid
Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

## Who's using Swipe
<img src='http://swipejs.com/assets/swipe-cnn.png' width='170'>
<img src='http://swipejs.com/assets/swipe-airbnb.png' width='170'>
<img src='http://swipejs.com/assets/swipe-nhl.png' width='170'>
<img src='http://swipejs.com/assets/swipe-htc.png' width='170'>
<img src='http://swipejs.com/assets/swipe-thinkgeek.png' width='170'>
<img src='http://swipejs.com/assets/swipe-snapguide.png' width='170'>

Shoot me a [note](mailto:brad@birdsall.co) if you want your logo here
- CNN
- Craigslist
- Airbnb
- NHL
- many more…

## License
Copyright (c) 2013 Brad Birdsall Licensed under the [The MIT License (MIT)](http://opensource.org/licenses/MIT).
12 changes: 12 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "Swipe",
"version": "2.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.4"
},
"engines": {
"node": ">=0.8.0"
}
}
82 changes: 44 additions & 38 deletions swipe.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function Swipe(container, options) {
// utilities
var noop = function() {}; // simple no operation function
var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution

// check browser capabilities
var browser = {
addEventListener: !!window.addEventListener,
Expand Down Expand Up @@ -111,7 +111,7 @@ function Swipe(container, options) {

// do nothing if already on requested slide
if (index == to) return;

if (browser.transitions) {

var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
Expand All @@ -131,16 +131,16 @@ function Swipe(container, options) {

// move all the slides between index and to in the right direction
while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);

to = circle(to);

move(index, width * direction, slideSpeed || speed);
move(to, 0, slideSpeed || speed);

if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
} else {

} else {

to = circle(to);
animate(index * -width, to * -width, slideSpeed || speed);
//no fallback for a circular continuous if the browser does not accept transitions
Expand All @@ -164,15 +164,15 @@ function Swipe(container, options) {

if (!style) return;

style.webkitTransitionDuration =
style.MozTransitionDuration =
style.msTransitionDuration =
style.OTransitionDuration =
style.webkitTransitionDuration =
style.MozTransitionDuration =
style.msTransitionDuration =
style.OTransitionDuration =
style.transitionDuration = speed + 'ms';

style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
style.msTransform =
style.MozTransform =
style.msTransform =
style.MozTransform =
style.OTransform = 'translateX(' + dist + 'px)';

}
Expand All @@ -186,13 +186,13 @@ function Swipe(container, options) {
return;

}

var start = +new Date;

var timer = setInterval(function() {

var timeElap = +new Date - start;

if (timeElap > speed) {

element.style.left = to + 'px';
Expand Down Expand Up @@ -233,7 +233,7 @@ function Swipe(container, options) {
// setup initial vars
var start = {};
var delta = {};
var isScrolling;
var isScrolling;

// setup event capturing
var events = {
Expand All @@ -249,7 +249,7 @@ function Swipe(container, options) {
case 'oTransitionEnd':
case 'otransitionend':
case 'transitionend': offloadFn(this.transitionEnd(event)); break;
case 'resize': offloadFn(setup.call()); break;
case 'resize': offloadFn(setup); break;
}

if (options.stopPropagation) event.stopPropagation();
Expand All @@ -270,7 +270,7 @@ function Swipe(container, options) {
time: +new Date

};

// used for testing first move event
isScrolling = undefined;

Expand Down Expand Up @@ -305,7 +305,7 @@ function Swipe(container, options) {
// if user is not trying to scroll vertically
if (!isScrolling) {

// prevent native scrolling
// prevent native scrolling
event.preventDefault();

// stop slideshow
Expand All @@ -320,15 +320,15 @@ function Swipe(container, options) {

} else {

delta.x =
delta.x /
delta.x =
delta.x /
( (!index && delta.x > 0 // if first slide and sliding left
|| index == slides.length - 1 // or if last slide and sliding right
&& delta.x < 0 // and if sliding at all
) ?
) ?
( Math.abs(delta.x) / width + 1 ) // determine resistance level
: 1 ); // no resistance if false

// translate 1:1
translate(index-1, delta.x + slidePos[index-1], 0);
translate(index, delta.x + slidePos[index], 0);
Expand All @@ -344,18 +344,18 @@ function Swipe(container, options) {
var duration = +new Date - start.time;

// determine if slide attempt triggers next/prev slide
var isValidSlide =
var isValidSlide =
Number(duration) < 250 // if slide duration is less than 250ms
&& Math.abs(delta.x) > 20 // and if slide amt is greater than 20px
|| Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width

// determine if slide attempt is past start and end
var isPastBounds =
var isPastBounds =
!index && delta.x > 0 // if first slide and slide amt is greater than 0
|| index == slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0

if (options.continuous) isPastBounds = false;

// determine direction of swipe (true:right, false:left)
var direction = delta.x < 0;

Expand All @@ -377,8 +377,8 @@ function Swipe(container, options) {

move(index, slidePos[index]-width, speed);
move(circle(index+1), slidePos[circle(index+1)]-width, speed);
index = circle(index+1);
index = circle(index+1);

} else {
if (options.continuous) { // we need to get the next in this direction in place

Expand Down Expand Up @@ -424,7 +424,7 @@ function Swipe(container, options) {
transitionEnd: function(event) {

if (parseInt(event.target.getAttribute('data-index'), 10) == index) {

if (delay) begin();

options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
Expand All @@ -444,8 +444,8 @@ function Swipe(container, options) {

// add event listeners
if (browser.addEventListener) {
// set touchstart event on element

// set touchstart event on element
if (browser.touch) element.addEventListener('touchstart', events, false);

if (browser.transitions) {
Expand Down Expand Up @@ -473,10 +473,10 @@ function Swipe(container, options) {

},
slide: function(to, speed) {

// cancel slideshow
stop();

slide(to, speed);

},
Expand All @@ -495,6 +495,12 @@ function Swipe(container, options) {

next();

},
stop: function() {

// cancel slideshow
stop();

},
getPos: function() {

Expand All @@ -503,7 +509,7 @@ function Swipe(container, options) {

},
getNumSlides: function() {

// return total number of slides
return length;
},
Expand All @@ -513,16 +519,16 @@ function Swipe(container, options) {
stop();

// reset element
element.style.width = 'auto';
element.style.left = 0;
element.style.width = '';
element.style.left = '';

// reset slides
var pos = slides.length;
while(pos--) {

var slide = slides[pos];
slide.style.width = '100%';
slide.style.left = 0;
slide.style.width = '';
slide.style.left = '';

if (browser.transitions) translate(pos, 0, 0);

Expand Down