Vue-carousel: Bug: When items are loaded asynchronously the carousel starts at the last pagination dot

[kevin-coyle]

If you add in the slides with a v-for and get the data inside those async, like for example an AJAX request then the pagination starts at the last dot.

Here's a JSFiddle to illustrate it https://jsfiddle.net/mor7m8s8/1/

I've used a set timeout to simulate the delay but it occurs just the same with an AJAX request.

[kevin-coyle]

I'm currently doing a pretty nasty

setTimeout(()=> {
  this.$refs.carousel.goToPage(0);
}, 1000);

To mitigate this, any ideas of how to get around it better? Maybe an event that I can respond to?

[quinnlangille]

Hmm nice find @kevin-coyle, this is likely due to what lifecycle we calculate pagination on. I'll flag this as a bug fix!

In the mean time, I think you can pass a :navigateTo=0 prop to have it start on the first slide. Kind of hacky but should work as a temp solution!

If you end up fixing it yourself, feel free to submit a pull request :octocat:

[kevin-coyle]

Thanks @quinnlangille I'll try that. Thank you for your help

[zhiga90]

v-if="images.length"
https://jsfiddle.net/mor7m8s8/2/

[DominusKelvin]

@zhiga90 Thanks for your solution, it works, could you explain the hack?

[quinnlangille]

Good thinking @zhiga90! @DominusKelvin, all it's doing it conditionally rendering the carousel. Which suggests the bug is being caused when the carousel loads before the content. Knowing that this works, the fix should be simple. The ideal solution would likely be a watcher or computer property, but I think I would even be comfortable adding this conditional into the component itself.

Would anyone be interested in submitting a pr for the fix? 😬 :octocat:

[gabdel1]

@zhiga90 Brilliant hack. Works like a charm.

[rosshulford]

@zhiga90 Works great for me.

[mjrerle2]

@zhiga90 excellent, worked well for me too.