disable loop when rewind is true

ganlanyuan · Sep 29, 2016 · 5014823 · 5014823
1 parent 70d4889
commit 5014823
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -18,16 +18,17 @@ npm install tiny-slider
 ## Features
 - responsive
 - fixed width
+- gutter
 - loop
+- rewind ([pull 10](https://github.com/ganlanyuan/tiny-slider/pull/10))
 - slide by page
-- customize controls / nav / gutter
+- customize controls / nav
 - autoplay
 - auto height
 - lazyload
 - touch support
 - arrow keys
-- accessibility for people using keyboard navigation or screen readers   
-(thank [DouglasdeMoura](https://github.com/DouglasdeMoura) and [epigeyre](https://github.com/epigeyre) for the sugestion, [issue4](https://github.com/ganlanyuan/tiny-slider/issues/4))
+- accessibility for people using keyboard navigation or screen readers ([issue4](https://github.com/ganlanyuan/tiny-slider/issues/4))
 
 ## Usage
 ##### 1. Include tiny-slider
@@ -112,7 +113,8 @@ Default:
   autoHeight: false,
   responsive: false,
   lazyload: false,
-  touch: true
+  touch: true,
+  rewind: false
 }
 ```
 

diff --git a/changelog.md b/changelog.md
@@ -27,6 +27,9 @@ class `tiny-next` => attribute `[data-controls="next"`.
 - Fixed: an issue with `items`, when container width is shorter than one slide in fixedWidth slider.
  -->
 
+#### v0.5.0
+- Added: `rewind` option. Thanks [faboulaws](https://github.com/ganlanyuan/tiny-slider/pull/10).
+
 #### v0.4.2
 - Fixed: a length issue when slider parent element has non-zero `padding`.
 

diff --git a/dist/min/tiny-slider.js b/dist/min/tiny-slider.js
diff --git a/dist/min/tiny-slider.native.js b/dist/min/tiny-slider.native.js
diff --git a/dist/tiny-slider.js b/dist/tiny-slider.js
@@ -659,6 +659,7 @@ var tinySlider = (function () {
       responsive: false,
       lazyload: false,
       touch: true,
+      rewind: false
     }, options || {});
 
     // make sure slider container exists
@@ -689,7 +690,8 @@ var tinySlider = (function () {
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
         autoplayText = options.autoplayText,
-        loop = (fixedWidth && !options.maxContainerWidth) ? false : options.loop,
+        rewind = options.rewind,
+        loop = (rewind || fixedWidth && !options.maxContainerWidth) ? false : options.loop,
         autoHeight = options.autoHeight,
         slideByPage = options.slideByPage,
         lazyload = options.lazyload,
@@ -949,8 +951,7 @@ var tinySlider = (function () {
         } else {
           prevButton.disabled = false;
         }
-
-        if (index === sliderCount - items) {
+        if (index === sliderCount - items && !rewind) {
           nextButton.disabled = true;
           changeFocus(nextButton, prevButton);
         } else {
@@ -1129,7 +1130,11 @@ var tinySlider = (function () {
     }
 
     function onClickControlNext() {
-      onClickControl(1);
+      if(index === sliderCount - items && rewind){
+        onClickControl(- sliderCount + items);
+      }else{
+        onClickControl(1);
+      }
     }
 
     // on doc click

diff --git a/dist/tiny-slider.native.js b/dist/tiny-slider.native.js
@@ -60,6 +60,7 @@ var tinySlider = (function () {
       responsive: false,
       lazyload: false,
       touch: true,
+      rewind: false
     }, options || {});
 
     // make sure slider container exists
@@ -90,7 +91,8 @@ var tinySlider = (function () {
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
         autoplayText = options.autoplayText,
-        loop = (fixedWidth && !options.maxContainerWidth) ? false : options.loop,
+        rewind = options.rewind,
+        loop = (rewind || fixedWidth && !options.maxContainerWidth) ? false : options.loop,
         autoHeight = options.autoHeight,
         slideByPage = options.slideByPage,
         lazyload = options.lazyload,
@@ -350,8 +352,7 @@ var tinySlider = (function () {
         } else {
           prevButton.disabled = false;
         }
-
-        if (index === sliderCount - items) {
+        if (index === sliderCount - items && !rewind) {
           nextButton.disabled = true;
           changeFocus(nextButton, prevButton);
         } else {
@@ -530,7 +531,11 @@ var tinySlider = (function () {
     }
 
     function onClickControlNext() {
-      onClickControl(1);
+      if(index === sliderCount - items && rewind){
+        onClickControl(- sliderCount + items);
+      }else{
+        onClickControl(1);
+      }
     }
 
     // on doc click

diff --git a/src/tiny-slider.native.js b/src/tiny-slider.native.js
@@ -91,12 +91,12 @@ var tinySlider = (function () {
         autoplayTimeout = options.autoplayTimeout,
         autoplayDirection = (options.autoplayDirection === 'forward') ? 1 : -1,
         autoplayText = options.autoplayText,
-        loop = (fixedWidth && !options.maxContainerWidth) ? false : options.loop,
+        rewind = options.rewind,
+        loop = (rewind || fixedWidth && !options.maxContainerWidth) ? false : options.loop,
         autoHeight = options.autoHeight,
         slideByPage = options.slideByPage,
         lazyload = options.lazyload,
         touch = options.touch,
-        rewind = options.rewind,
 
         sliderId,
         slideWidth,
@@ -532,7 +532,7 @@ var tinySlider = (function () {
 
     function onClickControlNext() {
       if(index === sliderCount - items && rewind){
-        onClickControl(-sliderCount);
+        onClickControl(- sliderCount + items);
       }else{
         onClickControl(1);
       }

diff --git a/tests/index.html b/tests/index.html
@@ -136,7 +136,8 @@
         responsive: {
           500: 2,
           800: 3,
-        }
+        },
+        rewind: true
       }).init();
 
       tinySlider({
@@ -171,7 +172,7 @@
       tinySlider({
         container: document.querySelector('.autoplay'),
         items: 3,
-        autoplay: true,
+        // autoplay: true,
         speed: 300,
         autoplayTimeout: 3000,
         autoplayText: ['▶', '❚❚']