There seems to be something wrong with the way the library initializes which slide it is on, it's quite broken

[cooperfrench95]

• Passing wrapAround causes the first image in a carousel to not display at all, then when you click next it skips two places
• If you turn wrapAround off, then there is no way to hide the next/prev buttons when you are at the beginning/end of the list. This is kind of a must-have
• If you accept point 2 and leave wrapAround off, then when you load the slider onto the first image in your list and click the next button, nothing happens except the navigation at the bottom gets its first thing highlighted. this indicates that when you load the component it doesn't initialize currentSlide properly. After you click next again it changes images as expected
• Passing a v-model or anything related to the modelValue prop breaks the component completely with Maximum call stack size exceeded. The error comes from here

 /**
         * Navigation function
         */
        const isSliding = ref(false);
        function slideTo(slideIndex, mute = false) {
            if (currentSlide.value === slideIndex || isSliding.value) { // Error triggered at this line when trying to get currentSlide.value
                return;
            }
            // Wrap slide index
            const lastSlideIndex = slidesCount.value - 1;
            if (slideIndex > lastSlideIndex) {
                return slideTo(slideIndex - slidesCount.value);
            }
            if (slideIndex < 0) {
                return slideTo(slideIndex + slidesCount.value);
            }
            isSliding.value = true;
            prevSlide.value = currentSlide.value;
            currentSlide.value = slideIndex;
            if (!mute) {
                emit('update:modelValue', currentSlide.value);
            }
            setTimeout(() => {
                if (config.wrapAround)
                    updateSlidesBuffer();
                isSliding.value = false;
            }, config.transition);
        }

Reproduction link: https://codesandbox.io/s/vue3-carousel-issue-repro-lo1dx?file=/src/App.vue

[avatarbabe]

I am also getting this error, there seems to be no way to set the current slide programatically that won't trigger this error.

[uke5tar]

Try and set the modelValue or v-model value after the component has mounted. Then you don't get the maximum call stack size exceed error.

Working example code:

<template>
  <carousel
    wrap-around
    v-model="initialSlide">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>

    <template #addons="{ currentSlide, slidesCount }">
      <Navigation />

      <div>
        {{ currentSlide + 1 }} / {{ slidesCount }}
      </div>
    </template>
  </carousel>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Carousel, Slide, Navigation } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

export default {
  name: 'Carousel',
  components: {
    Carousel,
    Slide,
    Navigation,
  },
  setup() {
    const initialSlide = ref(undefined);

    onMounted(() => {
      initialSlide.value = 0;
    });

    return {
      initialSlide,
    };
  },
};
</script>

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.