keen-slider react js extra dots showing issue

Question

There is bug which I can't solve there is a bug in keen-slider react js, when the no more item to slide but dots is appearing

there is code sandbox code https://codesandbox.io/s/quiet-fog-ekwqd?file=/src/App.js

Answer 1

for anyone else facing the same issuse using keen slider I believe you are using BREAKPOINTS and that is the issue because in the example of using dots there is no break points but to take into account calc of breakpoint use the below

const perSlideConf = instanceRef.current?.options?.slides?.perView - 1 ?? 0;

  const [ref, instanceRef] = useKeenSlider<HTMLDivElement>({
    mode: "free",
    rtl: lng === "ar",
    breakpoints: {
      "(min-width: 700px)": {
        slides: { perView: 3, spacing: 5 },
      },
      "(min-width: 1400px)": {
        slides: { perView: 4, spacing: 5 },
      },
    },
    slides: {
      perView: 1,
      spacing: 0,
    },
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel);
    },
    created() {
      !!salonsData && setLoaded(true);
    },
  });



const perSlideConf = instanceRef.current?.options?.slides?.perView - 1 ?? 0;

then

                {[
                  ...Array(
                    instanceRef.current.track.details.slides.length - perSlideConf,
                  ).keys(),
                ].map(idx => {
                  return (
                    <button
                      key={idx}
                      onClick={() => {
                        instanceRef.current?.moveToIdx(idx);
                      }}
                      className={cn(
                        "border-none w-[10px] h-[10px] bg-gray-300 rounded-full mx-[5px] p-[5px] cursor-pointer ",
                        currentSlide === idx ? "bg-[#6E4B87]" : "",
                      )}
                    ></button>
                  );
                })}

Answer 2

Since there is no apparent solution provided by the library, a workaround is set less dots than maximum.

In your case, put "-2" when getting the length of slides:

{slider && (
    <div className="dots">
      {[...Array(slider.details().size - 2).keys()].map((idx) => {
        return (
          <button
            key={idx}
            onClick={() => {
              slider.moveToSlideRelative(idx)
            }}
            className={"dot" + (currentSlide === idx ? " active" : "")}
          />
        )
      })}
    </div>
  )}