vue3-carousel not working on page change

[jmdmacapagal]

I am using vue3-carousel on nuxt3 (ssr), when I'm navigating to another page/link using NuxtLink the carousel will stop working, can't press navigation, autoplay wont work. when I refresh the page the carousel will resume working until I navigate again using NuxtLinks (not refreshing page)

steps to reproduce:

• create a vue3-carousel component on nuxt3
• use it on a page template (for example layout for blog pages)
• navigate on pages using NuxtLink and use the carousel

solutions I tried:

• wrapping the component in "client-only"
• used initCarousel and restartCarousel methods

packages: "nuxt": "^3.0.0-rc.3", "vue3-carousel": "^0.1.40",

[graphicfox]

I experience a similar problem I guess.

After nuxt route the autoplay slider jumps from one slide to the next without transistion. The problem seams to be that the slider gets the wrong width here:

function updateSlideWidth() {
   if (!root.value)
      return;
   const rect = root.value.getBoundingClientRect();
   slideWidth.value = rect.width / config.itemsToShow;
}

Temporarily solution is the init/update the slider on mounted delayed:

onMounted(() => {
  setTimeout(() => {
    slider.value.updateSlideWidth();
  }, 500);
});

[jmdmacapagal]

hi @graphicfox thanks for this, btw what is this root.value.getBoundingClientRect();? where can I access root

[graphicfox]

The root element seams to be an template Reference on the slider. https://github.com/ismail9k/vue3-carousel/blob/6767a12081830d171bfeb2ad3db0d7500772eb1f/src/components/Carousel.ts#L539

[MysteryHS]

Hi, i'm having the same issue but calling updateSlideWidth with delay like you did does not fix the problem, is there any other workaround ?

[lucasboh]

I experience a similar problem I guess.

After nuxt route the autoplay slider jumps from one slide to the next without transistion. The problem seams to be that the slider gets the wrong width here:

function updateSlideWidth() {
   if (!root.value)
      return;
   const rect = root.value.getBoundingClientRect();
   slideWidth.value = rect.width / config.itemsToShow;
}

Temporarily solution is the init/update the slider on mounted delayed:

onMounted(() => {
  setTimeout(() => {
    slider.value.updateSlideWidth();
  }, 500);
});

I'm having the same issue and @graphicfox solution worked in my case (thank you!). I changed 500 with 50 so the effect was not noticeable.

[Zellement]

Similar issue here.

On page load, works lovely.

Navigating away to a different page using nuxt-link and then back, the carousel no longer works. You can click the navigation & pagination, but the image doesn't change (however the pagination does change). Refreshing the page fixes the carousel.

Using Nuxt 3 RC 10, following the install instructions for Nuxt 3.

[sabid]

Fixed with this Releases v3.0.0-rc.12 of Nuxt 3

[un1t]

Fixed with this Releases v3.0.0-rc.12 of Nuxt 3

I have the same problem with "nuxt": "3.0.0-rc.12" "vue3-carousel": "^0.2.5"

[srestraj]

I experience a similar problem I guess. After nuxt route the autoplay slider jumps from one slide to the next without transistion. The problem seams to be that the slider gets the wrong width here:

function updateSlideWidth() {
   if (!root.value)
      return;
   const rect = root.value.getBoundingClientRect();
   slideWidth.value = rect.width / config.itemsToShow;
}

Temporarily solution is the init/update the slider on mounted delayed:

onMounted(() => {
  setTimeout(() => {
    slider.value.updateSlideWidth();
  }, 500);
});

I'm having the same issue and @graphicfox solution worked in my case (thank you!). I changed 500 with 50 so the effect was not noticeable.

Was having the same issue. This worked like a charm.

[zswilhelm]

I have the same problem with: "nuxt": "^3.0.0", "vue3-carousel": "^0.2.8"

I used: @init="handleInit" @slide-start="handleSlideStart" in tag and methods: { handleInit() { console.log("created"); }, handleSlideStart(data) { console.log("slide-start", data); }, },

console.log: slide-start {slidingToIndex: 1, currentSlideIndex: 0, prevSlideIndex: 0, slidesCount: 8} slide-start {slidingToIndex: 2, currentSlideIndex: 1, prevSlideIndex: 0, slidesCount: 8} slide-start {slidingToIndex: 3, currentSlideIndex: 2, prevSlideIndex: 1, slidesCount: 8}

but on page the animation doesn't work, the slide doesn't change

if i use a href tag to call page the carousel works perfect, but not

[ludioao]

I had the same problem.

And my solution was to restart slider after page change.

mounted() {
 setTimeout(() => {
      this.initialSlide = 0
      if (this.$refs.slider) { 
        this.$refs.slider.restartCarousel()
      }
    }, 500)
} 

[jmdmacapagal]

@zswilhelm hi, how did you setup vue3-carousel on the nuxt3 stable?

[zswilhelm]

@zswilhelm hi, how did you setup vue3-carousel on the nuxt3 stable?

https://ismail9k.github.io/vue3-carousel/getting-started.html#basic-using

[jmdmacapagal]

@zswilhelm was using that method but now it says [nitro] [dev] [unhandledRejection] ReferenceError: Carousel is not defined

[ivanalcalde]

By the moment we handle the issue by adding carousel.value.updateSlideWidth() inside of the handler event @slide-start

Hope this helps and also thanks to the maintainers of this package because it's awesome 🙌🏻 💚

[ismail9k]

Related #299