Property disableArrowsOnEdges not disabling right arrow if number of slides not a multiple of visibleSlides

[xss]

Given I have 13 slides in total, and I have visibleSlides set to 5 and slideMultiple to true in order to display and scroll 5 slides per navigation step, I would expect the "next" (right) arrow to be hidden on the third step (last 3 slides visible) when disableArrowsOnEdges is set to true. However, the right arrow remains even in the last possible navigation step, even though clicking seems to have no effect.

In contrast, the left arrow disappears on the first step, as would be expected. Also, should the slider have, for example, 10 or 15 slides (or some other multiple of the desired 5 slides per step), the right arrow disappears correctly.

This is an issue for me as I use Vueper Slides in a context where multiple sliders get created with a dynamic number of content slides, so multiples of somefixed value will not work, and are also rather pointless for responsive layouts when in smaller breakpoints visibleSlides differ.

Am I missing something here, or can this issue be confirmed by others?

[Woolgar]

Experiencing same issue, did you find a solution to this problem?

[xss]

Hi. Unfortunately, we did not find a solution at the time, no. I believe we reduced the step size per click to 1 in order to obscure this (for us) unacceptable design/consitency bug – which may cause a frustrating lot of clicking for the user.

In the end, we resorted to switching to another slider/carousel.

[yoshrubin]

this is super annoying, what slider did you end up using?

[xss]

I hope it is acceptable to mention and link to another project here... We are using vue3-carousel now. Perhaps not perfect, either, but suits our use case better, especially in respect to this issue.

[yoshrubin]

Ok I found a workaround for this issue,

I have a conditional class last-slide on the <VueperSlides> element
the class: (tailwind)

  .last-slide button.vueperslides__arrow.vueperslides__arrow--next {
    @apply opacity-0 cursor-default pointer-events-none;
  }

I then added an event handler for before-slide

 onBeforeSlide(event) {
     const { currentSlide, nextSlide } = event
     const indexDiff = nextSlide.index - currentSlide.index
     if (indexDiff > 0) {
       this.currentPage += 1
     } else if (indexDiff < 0) {
       this.currentPage -= 1
     }
   }

the computed value I used to determine the conditional class is

  isLastSlide() {
     return this.currentPage >= this.courses.length / this.itemsPerPage
   },

happy to hear any feedback but this seems to get me the desired result