don't depend on children being ul/li

instead trying to work with any elements that follow the same structure

README.md

@@ -19,7 +19,7 @@ Swipe only needs to follow a simple pattern. Here is an example:
 </div>
 ```
 
-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
 

index.html

@@ -50,12 +50,29 @@ <h2>Full width</h2>
 <a href='#' onclick='slider3.next();return false;'>next</a>
 <br><br>
 
+<h2>Arbitrary Elements</h2>
+
+<div id='slider4' class='swipe'>
+  <div>
+    <div style='display:block'><div>1</div></div>
+    <div style='display:none'><div>2</div></div>
+    <div style='display:none'><div>3</div></div>
+    <div style='display:none'><div>4</div></div>
+    <div style='display:none'><div>5</div></div>
+  </div>
+</div>
+
+<a href='#' onclick='slider4.prev();return false;'>prev</a> 
+<a href='#' onclick='slider4.next();return false;'>next</a>
+<br><br>
+
 
 <script src='swipe.js'></script>
 <script>
 new Swipe(document.getElementById('slider'));
 new Swipe(document.getElementById('slider2'));
 var slider3 = new Swipe(document.getElementById('slider3'));
+var slider4 = new Swipe(document.getElementById('slider4'));
 </script>
 
 </body> 

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;

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 = {
 
   }
 
-}
+};