How to create carousel using slots?

Question

People keep showing me the same method of creating carousel with array of images. But this method is inflexible because I want to each slide of my carousel contain a lightbox component. In this case, I don't want to rewrite the functionality of lightbox for images that I've put in the array of my carousel. Is that great? Write less code and make reusable components in Vue.js more useful than ever.

I discovered a really great example of using slots. Vue Carousel by SSENSE on GitHub. As not well-versed web developer, I still don't understand how he made a single slot visible per slide. This is a template

 <carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

As you see, we have a parent component carousel and child components slide. The most difficult part of me is to figure out how to extract some data from then like index, amount, and etc., to create functionality of carousel. I agree that is much simpler to create carousel with array of images but this method doesn't allow us to use another component inside carousel.

What do I want? I want to somehow extract index of each slot that is slide in this case, then I can easily create functionality for carousel by changing index. I think that there's a different path of creating carousel with slots, but I still don't understand all concepts of Vue and JavaScript well, so you can tell me about different ways of solving this problem.

Answer 1

You can access the slot elements in your component using the slots parameter of the setup function (also usable with the useSlots() component, and it's equivalent to this.$slots in the option api).

Then you can know how many elements it contains.

<script setup>
const slots = useSlots()

onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotsElements.length} elements.`)
})
</script>