Bug: Dynamic slides not working with slide in child template

I must say, this is a very nice carousel.

It works absolutely great when I use in combination with Laravel and add slides server side using the Blade template engine. However, I want to add these slides dynamically using Vue.

When using a Vue component that encapsulates slides instead of actual slides, dynamic slides do not work. Even when slides are directly added without the encapsulating component, they don’t work.

The problem is that the first page is initialized but navigation is impossible (nor with buttons nor using the autoplay function). The rendered HTML clearly shows that there are more slides than the first page is able to contain. The template I’m using is:

<template>
  <div>
      <carousel :pagination-enabled=true :navigation-enabled=true
      :per-page=5 :scroll-per-page=true :click-target-size=20
      :autoplay="true" :autoplay-timeout="5000">
        <list-item v-for="item in items" :key="item['id']"></list-item>
      </carousel>
  </div>
</template>

The child component list-item has the following template:

<template>
  <slide class="itemType">
    <div @click="itemClick">
        ....
    </div>
  </slide>
</template>

So both contain nothing fancy.

I’m using version 0.6.4 of the carousel.

[f4rr3ll1990]

For dynamicly loaded slides i use v-if on slider container: <carousel v-if="showSlider"> Set showSlider to false in your data(), and switch it to true when your slides is ready: this.showSlider = true;

[agarwalvinit]

+1