In the process of developing my personalized carousel, I have chosen to incorporate images using the <img> tag. However, I find that utilizing the Vue method for creating a carousel component offers more flexibility, especially since I intend to integrate a LightBox component within the slots of my carousel.
Let me introduce you to my parent component - the carousel:
<template>
<div class="carousel">
{{ slides }}
<slot></slot>
</div>
</template>
<script>
import { ref } from 'vue';
export default{
data(){
return{
Currentslide: 0,
}
},
setup(props, {slots}){
const slides=ref(slots.default().map((slides) => slides.props.id))
return{
slides,
}
}
}
</script>
Now, let's delve into the child component - the slide:
<template>
<div class="slide">
<slot/>
</div>
</template>
<script>
</script>
<template>
<Carousel>
<Slide id="1">1243423</Slide>
<Slide id=2>
1231
</Slide>
<Slide id="3">r445</Slide>
</Carousel>
</template>
<script>
import Carousel from "../../components/Reusable components/Carousel.vue"
import Slide from "../../components/Reusable components/Slide.vue"
export default{
components:{
Carousel,
Slide
}
}
While there may be inefficient methods in existence, such as creating an array of slot indexes, it is not considered the optimal solution. Hence, I am determined to explore alternate approaches for extracting IDs from slots within Vue.js frameworks.