Pagination Dots Not Activating Correctly with decimal Values for slidesToShow and infinite: false. about react-slick HOT 1 OPEN

Problem Description

Upon investigating an issue within the component of the react-slick package, I discovered that the currentSlide prop was occasionally receiving non-integer values (e.g., 1.66777) when rendering the last slide. This irregularity can cause unexpected behavior in the rendering and functionality of the dots navigation.

Resolution

To address this bug, I have implemented a fix in the component. The solution involves wrapping the currentSlide with Math.round to ensure it always receives an integer value, eliminating potential discrepancies.

dotProps = {
        ...dotProps,
        clickHandler: this.changeSlide,
        onMouseEnter: pauseOnDotsHover ? this.onDotsLeave : null,
        onMouseOver: pauseOnDotsHover ? this.onDotsOver : null,
        onMouseLeave: pauseOnDotsHover ? this.onDotsLeave : null,
        currentSlide: Math.round(dotProps.currentSlide)    // <--- this line fixed issue
      };
      dots = <Dots {...dotProps} />;

Implementation

The modified code has been pushed to a fork of the original repository. You can review the changes and test the fix by accessing my fork:

GitHub Fork with the Fix
In addition, I have published an npm package with the alteration for those who require an immediate solution:

react-slick-fixed-dots on npm
I look forward to the community's feedback on this solution, and I'm open to further improvements. Thank you for your consideration.

from react-slick.