Custom slides

[n4an]

MyCarousel.vue

<template>
  <carousel
    :autoplay="autoplay"
    :breakpoints="breakpoints"
    :items-to-show="itemsToShow"
    :pause-autoplay-on-hover="pauseAutoplayOnHover"
    :transition="transition"
    :wrap-around="wrapAround"
    :ref="ref"
  >
    <slot name="default"></slot>
    <slot name="addons"></slot>
  </carousel>
</template>

<script setup lang="ts">
  import { defineProps } from 'vue'
  import { Carousel } from 'vue3-carousel'

  defineProps({
    autoplay: {
      type: Number,
    },
    breakpoints: {
      type: Object,
    },
    itemsToShow: {
      type: Number,
    },
    pauseAutoplayOnHover: {
      type: Boolean,
    },
    transition: {
      type: Number,
    },
    wrapAround: {
      type: Boolean,
    },
    ref: {
      type: String
    },
  });
</script>

MySlide.vue

<template>
  <slide>
    <slot name="default"></slot>
  </slide>
</template>

<script setup lang="ts">
  import { Slide } from 'vue3-carousel'
</script>

MyPagination.vue

<template>
  <pagination>
    <slot name="default" />
  </pagination>
</template>

<script setup lang="ts">
  import { Pagination } from 'vue3-carousel'
</script>

Page.vue

<my-carousel
            autoplay="1"
            :breakpoints="breakpoints"
            :items-to-show="3"
            :pause-autoplay-on-hover="true"
            :transition="3000"
            :wrap-around="true"
            :ref="'teamCarousel'"
          >
            <template #default>
              <my-slide
                v-for="slide, key in reviewsSlides"
                key="key"
              >
                {{ slide.text }}
              </my-slide>
            </template>

            <template #addons>
              <my-pagination />
            </template>
          </my-carousel>

But that not work. How to make it to work?

[baijii]

I can confirm. As soon as Carousel and Slider are not part of the same component, it will not render any slides. Sadly, no idea how to fix this.

[danclarkdev]

Yep we're also seeing the same issue here - it makes it impossible to wrap these components and use <slot />, which is a pretty common pattern