centerMode/focusOnSelect slider ends up with incorrect active slide

[wilsonc-pella]

Issue replicated here, click on slide 8 on the left, then slide 5 on left, slide 1 ends up as the active slide.

https://codesandbox.io/s/react-slick-playground-jnn9l

config: accessibility: true, focusOnSelect: true, className: "configSlider", infinite: true, centerMode: true, slidesToShow: 1, slidesToScroll: 1, variableWidth: true,

[xavierlefevre]

Met the same behavior on my carousel, my config:

infinite: true,
accessibility: true,
vertical: true,
focusOnSelect: true,
slidesToShow: 1,
speed: 200,
centerMode: true
centerPadding: '160px'

[YossiSaadi]

Same for me

[vmia159]

I don't know if this will introduce new bug but it work for my case

The problem I think is because there is a condition where if targetIndex overflow, it will reset to index 0 i.e. Inside /utils/innerSliderUtils.js

if (centerMode && animationSlide >= slideCount) {
      animationSlide = infinite ? slideCount : slideCount - 1;
      finalSlide = infinite ? 0 : slideCount - 1;
}

Which should be

if (centerMode && animationSlide >= slideCount) {
      animationSlide = infinite ? finalSlide : slideCount - 1;
      finalSlide = infinite ? finalSlide % slideCount : slideCount - 1;
}

I am using react-slick 0.28.1 Here is how I fix it.

1. Download patch-package npm i patch-package
2. In package.json

{
...
"scripts":{
...
"postinstall":"patch-package"
}
}

3. Add folder name patches in the root directory
4. Create a file name: react-slick+0.28.1.patch

diff --git a/node_modules/react-slick/dist/react-slick.js b/node_modules/react-slick/dist/react-slick.js
index 8b9d7d3..fd1a199 100644
--- a/node_modules/react-slick/dist/react-slick.js
+++ b/node_modules/react-slick/dist/react-slick.js
@@ -2048,8 +2048,8 @@ var slideHandler = function slideHandler(spec) {
     } else if (!canGoNext(spec) && animationSlide > currentSlide) {
       animationSlide = finalSlide = currentSlide;
     } else if (centerMode && animationSlide >= slideCount) {
-      animationSlide = infinite ? slideCount : slideCount - 1;
-      finalSlide = infinite ? 0 : slideCount - 1;
+      animationSlide = infinite ? finalSlide : slideCount - 1;
+      finalSlide = infinite ? finalSlide % slideCount : slideCount - 1;
     } else if (animationSlide >= slideCount) {
       finalSlide = animationSlide - slideCount;
       if (!infinite) finalSlide = slideCount - slidesToShow;else if (slideCount % slidesToScroll !== 0) finalSlide = 0;

5. run this command again npm i
6. change import Slider from 'react-slick' to import Slider from 'react-slick/dist/react-slick'