Delay when using - ( :autoplay :wrap-around="true" )

[rising-dot]

When I am using :autoplay :wrap-around="true" the slider will have a delay and will not show up at all. All I see is a blank page and it will show up about 2 sec.

<template>
  <div id="section_slider">
    <Carousel :autoplay="2000" :wrap-around="true">
      <Slide v-for="slide in imgslider" :key="slide">
        <div class="carousel__item">
           <img class="imageSlider" :src="slide.name" />
        </div>
      </Slide>

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

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

export default defineComponent({
  name: 'Autoplay',
  data() {
    return {
      imgslider:[
        {id:1, name: require('@/assets/imgSlider/b1.jpg')},
        {id:2, name:require('@/assets/imgSlider/b2.jpg')},
        {id:3, name:require('@/assets/imgSlider/b3.jpg')},
        {id:4, name:require('@/assets/imgSlider/b4.jpg')},
        {id:5, name: require('@/assets/imgSlider/b5.jpg')}
      ]
    }
  },
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation
  },
});
</script>

<style>
img.imageSlider {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.carousel__item {
  min-height: 200px;
  width: 100%;
  background-color: var(--carousel-color-primary);
  color:  var(--carousel-color-white);
  font-size: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel__prev,
.carousel__next {
  box-sizing: content-box;
  border: 5px solid white;
}
</style>

When I remove the :autoplay from the code I can see that the transform: translateX(564px); start at 564px.

So I am thinking that the bug is at the transform: translateX and it need to start at 0px or am I doing something wrong ? Because the slider need to display the images right away and not wait for the autoplay timer first.

[IrishBruse]

yup i plus 1 this was working fine with wrapping but not its not

[Proladon]

same issues, :wrap-around="true" will make translateX and show blank.

[Proladon]

currently my temporary solution is:

onMounted(() => {
   setTimeout(() => {
     document.getElementsByClassName('carousel__track')[0].style.transform = 'translateX(0px)'
   }, 0)
})

[ismail9k]

Related to #100 (fixed in #103)