Removed jQuery as dependency

README.markdown

@@ -3,20 +3,20 @@
 Javascript and jQuery based component for making swipable containers for touch devides and with mouse usage.
 
 # Examples
-  
+
 Simple mouse/finger swipable textbox: [http://pulges.github.com/Content-Swipe/](http://pulges.github.com/Content-Swipe/)
 
 #Usage
-    
+
 The css variant with inline-blocks and no predefined width works only with no spaces between boxes in html.
 It can be used also with float left boxes but then #swipable must have a width that fits all boxes.
-    
+
     <style>
       #swipable-wrap { width: 800px; height: 400px; position: relative; overflow: hidden; }
       #swipeable { position: relative; white-space: nowrap; }
       .swipable-box { width: 800px; height: 400px; display: inline-block; overflow: hidden;}
     </style>
-    
+
     <div id="swipeable">
       <div class="swipable-box">
         ...
@@ -28,55 +28,46 @@ It can be used also with float left boxes but then #swipable must have a width t
     </div>
 
     <script type="text/javascript">
-      $('#swipeable').scroller();
+      new Scroller(document.getElementById('swipeable'));
     </script>
-    
+
 #Configuration
-  
-    $('#swipeable').scroller({
-      box_element: '.swipable-box', // classname of box elements
-      move_treshold: 0.15,          // fraction of width needed to drag to trigger scroll to another page
-      tap_treshold: 0.05,           // if less than this fraction of width moved, tap event is triggered on scroll box
+
+    new Scroller('swipeable', {
+      box_element: '.swipable-box', // css selector of box elements
+      move_threshold: 0.15,         // fraction of width needed to drag to trigger scroll to another page
+      tap_threshold: 0.05,          // if less than this fraction of width moved, tap event is triggered on scroll box
       fixed_stops: true             // if false autoscroll to closest slide is disabled
     });
 
 #Events
 
 If movement of less than tap treshold occurs. "tap" event is triggered on ".swipable-box"
-  
-    $('.swipable-box').on('tap', function() { alert('tap'); });
-  
+
+    document.querySelector('.swipable-box').addEventListener('tap', function() { alert('tap'); });
+
 After scroll animation finishes "scrollstop" event is triggered on "#swipeable" with index of scroll page position as second parameter
 
-    $('#swipeable').on("scrollstop", function(event, index) {
-      alert("Scrolled to index: " + index);
+    document.getElementById('swipeable').addEventListener('scrollstop', function(event) {
+      alert('Scrolled to index: ' + event.detail.currentIndex);
     });
-    
+
 #Actions
 Example of accessing inner functions
 
-    $('#swipeable').scroller();
-    
+    var scroller = new Scroller(document.getElementById('swipeable'));
+
     // to next slide
-    $('#next').click(function() {
-      $('#swipeable').scroller().next();
-    });
-
+    scroller.next();
+
     // to prev slide
-    $('#prev').click(function() {
-      $('#swipeable').scroller().previous();
-    });
+    scroller.previous();
 
     // slide to third slide (index 2 as list is 0 based)
-    $('#to3').click(function() {
-      $('#swipeable').scroller().move_to(2);
-    });
+    scroller.move_to(2);
 
     // switch to third slide without animation
-    $('#to3_i').click(function() {
-      $('#swipeable').scroller().move_to(2, true);
-    });
-
+    scroller.move_to(2, true);
+
 
 NB! Will update the gallery example soon. Current one will not work with new library.
-

example.html

@@ -46,32 +46,31 @@ <h1>Third Box</h1>
   <button id="next">Next</button>
   <button id="to3">3</button>
   <button id="to3_i">to 3 Instant</button>
-
-
-	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-	<script type="text/javascript" src="jquery.scroller.js"></script>
-
+
+
+	<script type="text/javascript" src="scroller.js"></script>
+
   <script type="text/javascript">
-    $('#swipeable').scroller({
-      "box_element" : '.swipable-box'
+    var scroller = new Scroller(document.getElementById('swipeable'), {
+      "box_element": '.swipable-box'
     });
-    
-    $('#next').click(function() {
-      $('#swipeable').scroller().next();
+
+    document.getElementById('next').addEventListener('click', function() {
+      scroller.next();
     });
-    
-    $('#prev').click(function() {
-      $('#swipeable').scroller().previous();
+
+    document.getElementById('prev').addEventListener('click', function() {
+      scroller.previous();
     });
-    
-    $('#to3').click(function() {
-      $('#swipeable').scroller().move_to(2);
+
+    document.getElementById('to3').addEventListener('click', function() {
+      scroller.move_to(2);
     });
-    
-    $('#to3_i').click(function() {
-      $('#swipeable').scroller().move_to(2, true);
+
+    document.getElementById('to3_i').addEventListener('click', function() {
+      scroller.move_to(2, true);
     });
-    
+
   </script>
 </body>
 </html>