vue-carousel: Bug: Slide component does not load when carousel's parent component is imported 0.6.8

Hello, I ran into an odd issue where the Carousel doesn’t display until I click on where the slide would be or trigger a pageChange by clicking on a pagination icon. Even stranger is that the elements are all there in the markup, but they won’t display until i click in the general area of the slider.

This only seems to occur when I import the components into another component that is being imported as well.

import Vue from 'vue'
import ProductOverview from './components/product-overview.vue'

const app = document.getElementById("app")

new vue({
  el: app,
  template: "<ProductOverview />",
  components: { ProductOverview }
})

<template>
<div class="product">
  <product-images></product-images>
  <product-form></product-form>
</div>
</template>

<script>
import ProductImages from "./product-images.vue";
import ProductForm from "./product-form.vue";

export default {
  components: {
    ProductImages,
    ProductForm
  }
};
</script>

<template>
  <carousel>
    <slide>
      <img src="https://placehold.it/600x400">
    </slide>
    <slide>
      <img src="https://placehold.it/600x400">
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from "vue-carousel";

export default {
  components: {
    Carousel,
    Slide
  }
};
</script>

Here are some screenshots as well.

initial-load

I click on one of the pagination circles:

after-click

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 31 (10 by maintainers)

Most upvoted comments

I had the same problem, and my solution is:

mounted() {
  setTimeout(() => {
    this.$refs['carousel'].onResize();
    this.$refs['carousel'].goToPage(0);
  }, 200);
}

+13

deakpal on Sep 4, 2018

@nchlodzi indeed an unfortunate bug, but I believe this may be solved with #172. However, I’m not entirely sure.

I was able to get some results with by setting the VueCarousel-slide style to this:

.VueCarousel-slide {
  visibility: visible;
  flex-basis: 100%;
  width: 100%;
}

Try that instead of the VueCarousel-inner

It’s a workaround, but it should display the slides by default with that.

+12

DavidVII on May 8, 2018

I trigger a window resize once the carousel is visible:

watch (carouselVisible) {
  if (carouselVisible) {
    Vue.nextTick(() => window.dispatchEvent(new Event('resize')))
  }
}

smakman on Jan 22, 2019

In my project vue-carousel in version 0.8.0 works great 😃 😃 😃. Hope it will work good for the others too 😃

nchlodzi on May 29, 2018

In my project with vue carousel v0.8.0 doesn’t work. I use it inside a modal (Bootstrap v3.3.7) and it renders a carousel with pictures. The issue is with the rendering as it is not shown at the beginning and can’t get the carousel width.

I solved it clicking the first dot on the navigation as soon as the modal is shown. I know its not a real fix but it’s working.

mounted(){
    $("#reviewModal").on('shown.bs.modal', function () {
        $('.VueCarousel-dot-container li:nth-child(1)').children().click();
        this.$refs['carousel'].goToPage(0);
    });
}

After that the carousel got the initial width and worked perfectly.

carlosmtrinidad on May 30, 2018