Swipe.loop added to affect how next and prev work

Readme.md

@@ -49,6 +49,11 @@
 
   Set the cycle interval, defaults to 5000ms.
 
+### .loop(state)
+
+  Affects the way next/prev are working.
+  If set to true they rewind after reaching beyond the last (or the first parameter).
+
 ### .refresh()
 
   This method should be invoked when the swipe element
@@ -72,18 +77,23 @@
 
 ### .prev()
 
-  Show the previous item if present, or do nothing.
+  Show the previous item.
+  By default, do nothing if showing the first item.
+  If `loop` is set to true and we are on the first item, display the last item.
 
 ### .next()
 
-  Show the next item if present, or do nothing.
+  Show the next item.
+  By default, do nothing if showing the last item.
+  If `loop` is set to true and we are on the last item, display the first item.
 
 ### .show(i, [ms], [options])
 
   Show item with the given index `i` with the given
   transition in `ms` defaulting to the `.duration()` value.
 
   You may pass `{ silent: true }` as an option to silence show events.
+  You may pass `{ loop: true }` to treat the position modulo the number of items.
 
 ## License
 

examples/grumpy.html

@@ -86,6 +86,7 @@
     <button onclick="show(0)">show(0)</button>
     <button onclick="show(2)">show(2)</button>
     <button onclick="resize()">resize()</button>
+    <input type="checkbox" onclick="cats.loop(this.checked)">loop</input>
 
     <script src="../build/build.js"></script>
     <script>

index.js

@@ -282,6 +282,20 @@ Swipe.prototype.interval = function(ms){
   return this;
 };
 
+/**
+ * Sets `loop` state
+ *
+ * @param {Boolean} loop - if true it'll cause next and prev to rewind
+ * @return {Swipe} self
+ * @api public
+ */
+
+Swipe.prototype.loop = function(loop){
+  this._loop = loop;
+  return this;
+};
+
+
 /**
  * Play through all the elements.
  *
@@ -316,12 +330,9 @@ Swipe.prototype.stop = function(){
  */
 
 Swipe.prototype.cycle = function(){
-  if (this.isLast()) {
-    this.currentVisible = -1;
-    this.next();
-  } else {
-    this.next();
-  }
+  this.show(this.currentVisible + 1, null, {
+    loop: true
+  });
 };
 
 /**
@@ -354,7 +365,9 @@ Swipe.prototype.isLast = function(){
  */
 
 Swipe.prototype.prev = function(){
-  this.show(this.currentVisible - 1);
+  this.show(this.currentVisible - 1, null, {
+    loop: this._loop
+  });
   return this;
 };
 
@@ -366,7 +379,9 @@ Swipe.prototype.prev = function(){
  */
 
 Swipe.prototype.next = function(){
-  this.show(this.currentVisible + 1);
+  this.show(this.currentVisible + 1, null, {
+    loop: this._loop
+  });
   return this;
 };
 
@@ -385,7 +400,14 @@ Swipe.prototype.show = function(i, ms, options){
   if (null == ms) ms = this._duration;
   var self = this;
   var children = this.children();
-  i = max(0, min(i, children.visible.length - 1));
+  if (!options.loop) {
+    i = max(0, min(i, children.visible.length - 1));
+  } else {
+    i = i % children.visible.length;
+    if (i < 0) {
+      i+= children.visible.length;
+    }
+  }
   this.currentVisible = i;
   this.currentEl = children.visible[i];
   this.current = indexOf(children.all, this.currentEl);