React-slick: Slider not infinite and in center mode can't reach its last slide

[diego06884]

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]

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

[diego06884]

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

[benvium]

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]

@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]

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

[benvium]

@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]

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.