Pagination Dots Not Activating Correctly with decimal Values for slidesToShow and infinite: false.

[jimbokid]

Hello,

I've found an issue where the pagination dots do not behave as expected when a user sets an decimal number for slidesToShow(e.g., 1.5) and infiniteis set to false.

In this scenario, the last pagination dot doesn't become active (the class "slick-active" isn't applied) when the last "page" of slides is visible. Pls use navigation buttons to slide.

For a demonstration of the problem, please view the CodeSandbox example I've put together:

https://codesandbox.io/s/react-slick-playground-forked-p5gmx6

I look forward to any suggestions for resolving this issue.

Thanks!

[jimbokid]

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.