Navigation Arrows Not Disabling Correctly

[GodinhoB]

Description
When using itemsToShow = 3 and itemsToScroll = 3 with 5 slides, the right navigation arrow remains enabled even when no more slides are available to display. This results in an incorrect active slide index and unexpected behavior when navigating back.

Steps to Reproduce
Go to Vue3 Carousel Examples.
Use the following configuration:

const config = {
itemsToShow: 3,
itemsToScroll: 3,
};

Start on slide 0 and click the right arrow.
Now on slide 3, displaying slides 2, 3, and 4 (last one).
The right arrow should be disabled but remains active.
Clicking the right arrow again increases activeSlide to 4, but no movement occurs since all slides are already visible.
The same issue happens when navigating back using the left arrow.
Expected Behavior
The right navigation arrow should be disabled when all slides have been displayed.
The left navigation arrow should correctly enable/disable based on available slides.

[ismail9k]

Thank you for reaching out!

This behavior is actually expected based on how the carousel manages navigation. The right arrow remains active as long as activeSlide + 1 < slides.length, even if all visible slides are already displayed.

To better understand this, you can apply the following CSS to highlight the active slide:

.carousel__slide--active {
  border: 1px solid red;
}

Since itemsToScroll = 3, clicking the right arrow moves the active index forward by 3. However, when fewer than 3 slides remain, the index moves forward only as far as possible without exceeding the total slide count. The arrow is disabled only when reaching the last possible active slide index.

Let me know if you need further clarification!

CleanShot.2025-03-13.at.11.04.17.mp4

[DawidKopys]

I agree with the @GodinhoB - expected behavior is to disable the right navigation button once all slides are visible.
This is the behavior a user would expect.
From users perspective, there is no more slides to see, so it doesn't make sense to scroll further.
Most of the UI / carousels libraries I have worked with, do it "the expected way".

Examples:

1. swiper: https://codesandbox.io/p/devbox/swiper-vue-pagination-fraction-forked-2gwcdr (preview might not be updated in chrome, thanks codesanbox! open in firefox/edge/whatever)
2. primevue: https://primevue.org/carousel/#basic
3. shadcn: https://v0.dev/chat/carousel-size-P2fuDpHvrMK