variableWidth: true, infinite: false not disabling the next arrow button when the last element enters the viewport

[rsiuli001]

Issue:

When variableWidth is "true" and infinite is set to "false", next button does not get disabled when the last element enters the viewport. It keeps on scrolling leaving a whitespace after the last element.

Also is there any easier way to calculate "slidesToShow" variable? Max possible number of elements should be present in the screen and "slidesToScroll" should be "slidesToShow - 1" or 1 whichever is the higher.

 const settings: Settings = {
    className: "slider variable-width",
    dots: false,
    infinite: false,
    centerMode: false,
    variableWidth: true,
    slidesToShow: numSlides,
    slidesToScroll: numSlides,
  };

<Slider ref={sliderRef} {...settings}>
          {data.map((el, i) => {
            return (
              <div
                id={`element-${i}`}
                className="whitespace-nowrap p-2 w-auto"
                key={i}
              >
                {el}
              </div>
            );
          })}
</Slider>

Code sandbox: https://codesandbox.io/embed/ncsf68?view=Editor+%2B+Preview&module=%2Findex.js

[joae]

Hi! I've been dealing with the same issue and couldn't find a workaround.

[EL-MEHDI-ESSAADI]

Same here guys, I couldn't find a workaround