<template>
<div class="carousel">
<slot></slot>
<button @click="index++">Next</button>
</div>
</template>
<script setup>
import { useSlots, onMounted, onUpdated, ref} from 'vue';
const slots = useSlots()
const index = ref(0)
onMounted(() => {
const defaultSlotElements = slots.default()
console.log(`My default slot has ${defaultSlotElements.length} elements.`)
}),
onUpdated(() =>{
console.log(defaultSlotElements[index])
}
)
</script>
I’m trying to create carousel based on slots. Thanks to the previous person on stack overflow, he helped me to figured out how to extract array of slots. Now, I’m dealing with another issue. In order to create carousel, I have to somehow change index of element in the array, so I can move to the next slide of my carousel. Later I have to inject it to my slide component to let V-show render current slot that is 0 by default. But index’s value is changed by v-on directive that changes index, so it selects the next or previous slot in the array. I know that I’ve chosen a complex subject in vue but I don’t want to use simpler version of carousel based on images’ array because I can’t add another component inside this one.
It turned out that I cannot simply by changing index arr[index] select the next object in the array.