Carrosel only work after in inspect element

[naruto00796]

I I'm using the core ui putting the carousel inside a modal and inside a nav-tab, but it only works when I inspect the page element, could someone help me?

obs: I only load the images when the modal is opened

Component:

<div v-show="photosList && Object.keys(photosList).length > 0">
              <Carousel ref="myCarousel" :itemsToShow="1" :wrapAround="true" :mouseDrag="false" :touchDrag="false">
                <Slide v-for="(photo, i) in photosList" :key="i">
                  <img class="d-block w-75" :src="`${imagePath}${photo.uri}`"/>
                </Slide>
                <template #addons>
                  <navigation />
                </template>
              </Carousel>
</div>

Load photos in method: this.photosList = await this.ActionFotoCons_veiculoId({'id': this.form.attributes.veiculo_id});

[ismail9k]

You can hard reset the carousel after displaying the modal

nextTick(() => {
   carouselRef.restartCarousel()
});

[naruto00796]

You can hard reset the carousel after displaying the modal

nextTick(() => {
   carouselRef.restartCarousel()
});

i tried like this, after loading images, unfortunately it didn't work:

this.$nextTick(() => {
this.$refs.carousel.restartCarousel();
});

[ismail9k]

Related #299

[naruto00796]

ok

[Darkside73]

This should be in the documentation