Carousel works only after the page is resized

[joshuadsouza08]

The carousel displays the images when mounted but does not go to the next image unless the page is resized and this happens only if there is a 'd-flex' bootstrap property in the parent Div element, without the 'd-flex' the carousel works fine. is there any reason for this?

[thalida]

I ran into a similar issue as joshua today when creating an image carousel, on load the carousel wasn't scrolling fully to the next page until I resized the window (see bug gif below). In my case updateSlideWidth is called before the images load, so it gets the default slide width of ~200px. The easiest solution for me was to update my css to have a fixed width.

I'm curious what your template and css looks like @joshuadsouza08? (I commented on this issue instead of creating a new one since it's a similar outcome "the carousel only works after the page is resized", but might be caused for different reasons, and may require a new issue depending on how ismail9k wants to do tracking. The solution for mine could be adding an image carousel example to the documentation, instead of a logic change.)

Template / CSS To Reproduce: template:

<div class="gallery">
    <carousel>
      <slide v-for="photo in photos as any[]" :key="photo.id">
        <div class="carousel__item">
          <img :src="photo.image_url" alt="" />
        </div>
      </slide>
      <template #addons>
        <navigation />
      </template>
    </carousel>
</div>

original css:

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

  img {
    height: 100%;
  }
}

bug gif:

Solution (same template) Updated css:

.carousel__item {
  height: 500px;
  width: 500px; // instead of 100%
  background-color: var(--vc-clr-primary);
  color: var(--vc-clr-white);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 100%; // constrain image width
  }
}

fixed gif:

[joshuadsouza08]

i am rendering an adaptive card inside a 'div' element of the tag.When I add the css property d-flex to the parent div element i get the bug as shown in the bug gif above.

`

`

i tried using the css you suggested @thalida but it did not work for me. am i doing something wrong here ?

[lacorde]

Hi @joshuadsouza08, I have the same exact behaviour as yours.

Using the basic example provided by @ismail9k, and no specific CSS.

Carousel is working fine when the app is first mounted. Then if I change page (I'm using Nuxt), and then go back to the page including the slider, navigation/slides stop working. Only resizing "solves" the bug.

Note : The carousel reacts OK to click/touch events, but the translateX property on carousel__track is stucked at 0px.

[ismail9k]

I will look into this issue. For now, as a temporary fix for this issue, you can use restartCarousel() method to recalculate the carousel slide width.

[lacorde]

@ismail9k Thank you for your answer. In the end, the following code worked for me (setting the initial slide on mounted) @joshuadsouza08

<template>
  <carousel :items-to-show="1.5" v-model="initialSlide">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>
    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>

<script>
export default {
 data() {
  return {
   initialSlide: undefined,
  };
 },
 mounted() {
  this.initialSlide = 0;
 },
{
</script>