Problems when sliding

[weathon]

(used with vue and ionic)

It always stays at page one whatever you do. But if I change the window size it will work again.

Code:

<template>
  <Carousel>
    <Slide v-for="slide in 10" :key="slide">
      <div style="width:50px;background-color:purple">{{ slide }}</div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

<script lang="ts">
import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
export default {
  name: "Tab1",
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};
</script>

[weathon]

I think it is a problem of ionic, though

[weathon]

If I add the code after the page is loaded, it works. But if I add it before, it doesn't

[ismail9k]

What is the version of vue3-carousel, you are using?

[weathon]

The latest

[ismail9k]

In order to help me debugging this issue could you provide me with a minimal working example, on CodeSandbox or JSfiddle

[weathon]

Sorry for the late response, I figured it out. It is ionic's issue. Thank you

[Pankechi]

Sorry for the late response, I figured it out. It is ionic's issue. Thank you

Hey, i'm faced with exact the same problem, using Vue3 and compositiopn API. Please, can you tell me how did u fixed this problem?

[ahpoo]

@Pankechi This is my first post on a Github Issue, so apologies if it's hard to read.

A temporary solution is described below. Please try it. <Carousel ref="myCarousel"> ... </Carousel>

import { ref } from 'vue'

setup() {
  const myCarousel = ref(null)

  onMounted(async () => {
    ... 
    get some images 
    ...
    (myCarousel.value as any).updateSlidesData();
  });

  return {
    myCarousel,
  }
}

[Pankechi]

@ahpoo Still not working for me. Here's my code. But anyway, thanks a lot for the answer.

const myCarousel = ref(null)

onMounted(() => myCarousel.value.updateCarousel())