How to make slot conditionally rendered?

<template>
    <div class="carousel">
        {{ index}}
                <slot></slot>
         <button @click="next">Next</button>
    </div>

</template>
<script setup>
import { useSlots, onMounted, ref, onUpdated, provide} from 'vue';

const slots = useSlots()
const index = ref(0)
function next(){
    index.value = index.value + 1 == slots.default().length ? 0 : index.value + 1;
}
onUpdated(() => {
  const currentSlide = ref(slots.default()[index.value])
})
</script>

I’m creating my own carousel. I have const currentslide that equals the first object in my array by default.

I have to figure out how to provide and inject this const to my slot “Slide” and then make it conditionally rendered. It means that the current slide that is shown in my carousel is 0 by default but I can change by clicking on the button next

<template>
    <div class="slide">

        <slot/>
    </div>
    
</template>
<script>

</script>