I need help with displaying images in a carousel from data fetched via Firebase. I have created a directive, but the problem lies with the v-for loop. The directive is executed before the v-for loop, resulting in no items in the carousel.
Directive:
directives: {
slick: {
inserted: function (el) {
$(el).slick({
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
speed: 2000,
fade: true,
pauseOnHover: false
})
}
}
}
HTML
<div v-slick>
<div v-for="sponsor in sponsors">
{{sponsor.name}}
</div>
</div>