akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

Slider not infinite and in center mode can't reach its last slide #1716

Open diego06884 opened 4 years ago

diego06884 commented 4 years ago

When I create a slider and turn on the centerMode flag but set the infinite flag to false, then the slider can't reach its last slide.

I was able to replicate this in your examples.

CodeSandBox Example: https://codesandbox.io/s/elegant-knuth-qdkus?fontsize=14&hidenavigation=1&theme=dark

benvium commented 4 years ago

@diego06884 I don't suppose you found any workaround for this issue?

diego06884 commented 4 years ago

@benvium no, I ended up using the slick library directly instead

benvium commented 4 years ago

We ended up using patch-package (https://www.npmjs.com/package/patch-package) and the following patch file to work around this issue:

patches/react-slick+0.25.2.patch

diff --git a/node_modules/react-slick/lib/dots.js b/node_modules/react-slick/lib/dots.js
index a1d6501..ce931ac 100644
--- a/node_modules/react-slick/lib/dots.js
+++ b/node_modules/react-slick/lib/dots.js
@@ -40,8 +40,10 @@ var getDotCount = function getDotCount(spec) {

   if (spec.infinite) {
     dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
-  } else {
+  } else if (spec.slidesToScroll > 1) {
     dots = Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) + 1;
+  } else {
+    dots = Math.ceil(spec.slideCount);
   }

   return dots;
diff --git a/node_modules/react-slick/lib/utils/innerSliderUtils.js b/node_modules/react-slick/lib/utils/innerSliderUtils.js
index 895f943..74fd7fe 100644
--- a/node_modules/react-slick/lib/utils/innerSliderUtils.js
+++ b/node_modules/react-slick/lib/utils/innerSliderUtils.js
@@ -126,7 +126,7 @@ var canGoNext = function canGoNext(spec) {
   if (!spec.infinite) {
     if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) {
       canGo = false;
-    } else if (spec.slideCount <= spec.slidesToShow || spec.currentSlide >= spec.slideCount - spec.slidesToShow) {
+    } else if (!spec.centerMode && (spec.slideCount <= spec.slidesToShow || spec.currentSlide >= spec.slideCount - spec.slidesToShow)) {
       canGo = false;
     }
   }
Schmerb commented 4 years ago

@benvium Have you considered submitting a PR with the above fix directly to react-slick? I confirmed this change does indeed fix the issue for me. Thanks!

nazifa-lennon commented 4 years ago

has anyone found a way to solve this issue without using patch-package ?

benvium commented 4 years ago

@Schmerb A PR is a nice idea but I wasn't able to check this didn't break something else due to time constraints on the project this was for.

httpiga commented 3 years ago

I tried to create a patch for v0.28.0 with the same changes @benvium did but the slider still can't reach last slide. As a temporary solution i kept v0.25.2 with benvium patch.