question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: Dynamic slides not working with slide in child template

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
f4rr3ll1990commented, May 1, 2018

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;

2reactions
agarwalvinitcommented, Sep 14, 2017

+1

Read more comments on GitHub >

github_iconTop Results From Across the Web

slick slider not working on dynamically generated li
I think is a slick slider bug, seems not fully working with ul and li, as this issue it breaks the structure writing...
Read more >
Ion Slide dynamic update not working.(vue3)Bug Found
Hello, compared to list v-for loop it can be update the list using states but in ion slides not I receive this error....
Read more >
Sliders | Themeco Docs
The Slide Pagination Element renders dynamic Slider pagination that will automatically update its markup as your Slider pages adjust responsively.
Read more >
Animation transitions and triggers - Angular
Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger. src/app/open-close.component.ts content_copy transition ...
Read more >
10 Common WordPress Theme Issues & How To Fix Them
The “failed” to import error is usually 1 of 2 things. The first is that it could be trying to load posts or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found