<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(`The default slot contains ${defaultSlotElements.length} elements.`)
}),
onUpdated(() =>{
console.log(defaultSlotElements[index])
}
)
</script>
I am working on creating a carousel using slots. With the help of an individual on Stack Overflow, I learned how to extract an array of slots. An additional challenge I am facing involves changing the index of elements in the array to navigate through the carousel slides. The plan is to update the slide component with the current slot selected, which defaults to 0. However, changing the value of the index with the v-on directive is not straightforward, as it needs to select the next or previous slot in the array. Despite the complexity of this vue subject, I prefer not to opt for a simpler carousel version based on image arrays due to limitations on adding additional components within this one.
It seems that simply changing the index arr[index] does not directly lead to selecting the next object in the array.