Vue-carousel: Bug: Dynamic slides not working with slide in child template

[riccardo92]

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.

[agarwalvinit]

+1

[agarwalvinit]

Hi, first of all this is an awesome carousel. Solves all of my problem till date. The only 2 things that I don't understand is:-

1. The css breaks in safari are we not using prefixer ?
2. I also want to do something similar to @riccardo92, my problem is I have an array of 20 items and there are 3 carousel and all the three carousel can have 20 or less slides from that array of 20 item. Right now I have to make same slide thrice but I want to make that slide once and use that in other two carousel.
   How can I achieve that ?

[nilsi]

I have this issue as well and also had it with the other library Flickity. What I did with Flickity was to call a method on the carousel called reposition that re-initialized the carousel when my loop finished. This worked great for Flickity but haven't found any way to do something similar with this plugin. Any ideas?

[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;

[quinnlangille]

Though I wouldn't call it a full solution, @f4rr3ll1990's method is definitely a fix until we can get this working natively

[jp-sauve]

Is this related to being dynamic? I have a slide component, and can't get the slideshow working either, although all of the slides' data are in the carousel component.

[quinnlangille]

Hey @jp-sauve, mind sending over a reproduction of your issue? If _nothing_ is loading at all, this seems unrelated

[jp-sauve]

@quinnlangille I actually switched to using a nested template instead of a separate component for the slides and it worked as expected. I have limited needs so it worked. If I have some time I'll play with it again, as we may want to add more in the future.

[quinnlangille]

Good to hear @jp-sauve!