Slider controls break if using more than 1 slide per view

[vipindigiqt]

Hi there, I'm using React version, and started with the examples.

So, I picked this example, which has arrows and dots. - https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/navigation-controls/arrows-and-dots/react?file=/src/App.js

The thing is, everything works fine when I have 1 slide per view, but It breaks when I change it to 3 slides per view.

Both the arrows and dots are broken.

Reproduction - https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/navigation-controls/arrows-and-dots/react?file=/src/App.js

Also, I inspected the instanceRef.current.track.details.slides.length property that we track to implement disabled arrows, but the values are in decimal, which I think is not ideal to track since we are using those values to make our buttons disabled.

Can we simply add a boolean property if slides can go next/prev?

Thanks!

[rflgentil]

I'm having the same problem over here.

@vipindigiqt Did you manage to find any solution?

[drewlonious]

on sliderCreated within the navigation plugin, will remove the extra dot if using more than 1 slidePerView

`

    slider.track.details.slides.forEach((_e, idx) => {
      console.log("_e", _e);
      if (Math.round(slider.options.slides.perView) > 1) {
        if (idx !== slider.track.details.slides.length - 1) {
          var dot = document.createElement("button");
          dot.classList.add("dot");
          dot.setAttribute('aria-label', 'Slide ' + (idx + 1))
          dotsWrapper.appendChild(dot);
          dot.addEventListener("click", () => slider.moveToIdx(idx))
        }
      } else {
        var dot = document.createElement("button");
        dot.classList.add("dot");
        dot.setAttribute('aria-label', 'Slide ' + (idx + 1))
        dotsWrapper.appendChild(dot);
        dot.addEventListener("click", () => slider.moveToIdx(idx))
      }

`