diff --git a/README.md b/README.md index bad2341..6e43612 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ Swipe only needs to follow a simple pattern. Here is an example: ``` -Above is the initial required structure– an unordered list wrapped in a containing div *(more on the `display:block/none` reasoning below)*. Place any content you want within the list items. The containing div will need to be passed to a new Swipe object like so: +Above is the initial required structure– a series of elements wrapped in two containers. An unordered list makes sense here, but this can be any combination of elements that has the same structure. *(more on the `display:block/none` reasoning below)*.Place any content you want within the items. The containing div will need to be passed to a new Swipe object like so: ``` js diff --git a/index.html b/index.html index 5f78066..58a1d4c 100644 --- a/index.html +++ b/index.html @@ -50,12 +50,29 @@

Full width

next

+

Arbitrary Elements

+ +
+
+
1
+
2
+
3
+
4
+
5
+
+
+ +prev +next +

+ diff --git a/style.css b/style.css index 50d6b07..c613afe 100644 --- a/style.css +++ b/style.css @@ -36,7 +36,7 @@ a { .swipe { padding-bottom:20px; } -.swipe li div { +.swipe li div, .swipe div div div { margin:0 10px; padding:50px 10px; background:#1db1ff; diff --git a/swipe.js b/swipe.js index 5c90ae6..3915d64 100644 --- a/swipe.js +++ b/swipe.js @@ -22,7 +22,7 @@ window.Swipe = function(element, options) { // reference dom elements this.container = element; - this.element = this.container.getElementsByTagName('ul')[0]; // the slide pane + this.element = this.container.children[0]; // the slide pane // static css this.container.style.overflow = 'hidden'; @@ -44,14 +44,14 @@ window.Swipe = function(element, options) { this.element.addEventListener('transitionend', this, false); window.addEventListener('resize', this, false); -} +}; Swipe.prototype = { setup: function() { // get and measure amt of slides - this.slides = this.element.getElementsByTagName('li'); + this.slides = this.element.children; this.length = this.slides.length; // return immediately if their are less than two slides @@ -173,7 +173,7 @@ Swipe.prototype = { // set initial timestamp of touch sequence time: Number( new Date() ) - } + }; // used for testing first onTouchMove event this.isScrolling = undefined; @@ -241,4 +241,4 @@ Swipe.prototype = { } -} \ No newline at end of file +}; diff --git a/swipe.min.js b/swipe.min.js index 4dcbfd6..3cea154 100644 --- a/swipe.min.js +++ b/swipe.min.js @@ -5,4 +5,4 @@ * Copyright 2011, Licensed GPL & MIT * */ -window.Swipe=function(a,b){if(!a)return null;var c=this;this.options=b||{},this.index=this.options.startSlide||0,this.speed=this.options.speed||300,this.callback=this.options.callback||function(){},this.delay=this.options.auto||0,this.container=a,this.element=this.container.getElementsByTagName("ul")[0],this.container.style.overflow="hidden",this.element.style.listStyle="none",this.setup(),this.start(),this.element.addEventListener("touchstart",this,!1),this.element.addEventListener("touchmove",this,!1),this.element.addEventListener("touchend",this,!1),this.element.addEventListener("webkitTransitionEnd",this,!1),this.element.addEventListener("msTransitionEnd",this,!1),this.element.addEventListener("oTransitionEnd",this,!1),this.element.addEventListener("transitionend",this,!1),window.addEventListener("resize",this,!1)},Swipe.prototype={setup:function(){this.slides=this.element.getElementsByTagName("li"),this.length=this.slides.length;if(this.length<2)return null;this.container.style.visibility="hidden",this.width=this.container.getBoundingClientRect().width,this.element.style.width=this.slides.length*this.width+"px";var a=this.slides.length;while(a--){var b=this.slides[a];b.style.width=this.width+"px",b.style.display="table-cell",b.style.verticalAlign="top"}this.slide(this.index,0),this.container.style.visibility="visible"},slide:function(a,b){var c=this.element.style;c.webkitTransitionDuration=c.MozTransitionDuration=c.msTransitionDuration=c.OTransitionDuration=c.transitionDuration=b+"ms",c.webkitTransform="translate3d("+ -(a*this.width)+"px,0,0)",c.msTransform=c.MozTransform=c.OTransform="translateX("+ -(a*this.width)+"px)",this.index=a},getPos:function(){return this.index},prev:function(a){this.delay=a||0,clearTimeout(this.interval),this.index&&this.slide(this.index-1,this.speed)},next:function(a){this.delay=a||0,clearTimeout(this.interval),this.index0||this.index==this.length-1&&this.deltaX<0?Math.abs(this.deltaX)/this.width+1:1),this.element.style.webkitTransform="translate3d("+(this.deltaX-this.index*this.width)+"px,0,0)")},onTouchEnd:function(a){var b=Number(new Date)-this.start.time<250&&Math.abs(this.deltaX)>20||Math.abs(this.deltaX)>this.width/2,c=!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0;this.isScrolling||this.slide(this.index+(b&&!c?this.deltaX<0?1:-1:0),this.speed)}} \ No newline at end of file +window.Swipe=function(b,a){if(!b){return null;}var c=this;this.options=a||{};this.index=this.options.startSlide||0;this.speed=this.options.speed||300;this.callback=this.options.callback||function(){};this.delay=this.options.auto||0;this.container=b;this.element=this.container.children[0];this.container.style.overflow="hidden";this.element.style.listStyle="none";this.setup();this.start();this.element.addEventListener("touchstart",this,false);this.element.addEventListener("touchmove",this,false);this.element.addEventListener("touchend",this,false);this.element.addEventListener("webkitTransitionEnd",this,false);this.element.addEventListener("msTransitionEnd",this,false);this.element.addEventListener("oTransitionEnd",this,false);this.element.addEventListener("transitionend",this,false);window.addEventListener("resize",this,false);};Swipe.prototype={setup:function(){this.slides=this.element.children;this.length=this.slides.length;if(this.length<2){return null;}this.container.style.visibility="hidden";this.width=this.container.getBoundingClientRect().width;this.element.style.width=(this.slides.length*this.width)+"px";var a=this.slides.length;while(a--){var b=this.slides[a];b.style.width=this.width+"px";b.style.display="table-cell";b.style.verticalAlign="top";}this.slide(this.index,0);this.container.style.visibility="visible";},slide:function(a,c){var b=this.element.style;b.webkitTransitionDuration=b.MozTransitionDuration=b.msTransitionDuration=b.OTransitionDuration=b.transitionDuration=c+"ms";b.webkitTransform="translate3d("+-(a*this.width)+"px,0,0)";b.msTransform=b.MozTransform=b.OTransform="translateX("+-(a*this.width)+"px)";this.index=a;},getPos:function(){return this.index;},prev:function(a){this.delay=a||0;clearTimeout(this.interval);if(this.index){this.slide(this.index-1,this.speed);}},next:function(a){this.delay=a||0;clearTimeout(this.interval);if(this.index0||this.index==this.length-1&&this.deltaX<0)?(Math.abs(this.deltaX)/this.width+1):1);this.element.style.webkitTransform="translate3d("+(this.deltaX-this.index*this.width)+"px,0,0)";}},onTouchEnd:function(c){var b=Number(new Date())-this.start.time<250&&Math.abs(this.deltaX)>20||Math.abs(this.deltaX)>this.width/2,a=!this.index&&this.deltaX>0||this.index==this.length-1&&this.deltaX<0;if(!this.isScrolling){this.slide(this.index+(b&&!a?(this.deltaX<0?1:-1):0),this.speed);}}}; \ No newline at end of file