Hey there! I'm trying to incorporate a carousel using Vue Slick Carousel in my Vue component. Here's what I have so far:
<vue-slick-carousel
v-if="groupOne && groupOne.length > 0"
v-bind="settings"
>
<component
:is="picture.template"
v-for="picture in groupOne"
:key="picture.title"
:params="picture"
:size="params.size"
@click="onClick(picture)"
/>
</vue-slick-carousel>
<script>
import 'vue-slick-carousel/dist/vue-slick-carousel.css';
export default{
components: {
VueSlickCarousel: () => import('vue-slick-carousel'),
}
data() {
return {
settings: {
arrows: true,
slidesToShow: 1,
lazyLoad: 'ondemand',
autoplay: true
}
};
},
}
</script>
I am encountering an error where the carousel is not displaying and the console shows the following message:
Uncaught (in promise) TypeError: this.$slots.default is undefined
If anyone has any insights on how to resolve this issue, I would greatly appreciate your help!