How can I use carousel combined if data is from props (array of objects) and if I want to use slot

[tiborAntalInterway]

Im using carousel component (u-carousel) actually like this:

and I want to have option, when I want to push slides not from prop dataSlides but from parent component (using slots), like this:

is possible to do it? thanks

[ismail9k]

Using v-html is not recommended, here's an example to achieve what you would like to:

// UCarousel
<template>
  <Carousel v-show="items.length" :wrap-around="true" snap-align="center">
    <template #slides>
       <slot />
    </template>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

// SlideWrapper
<template>
  <div class="carousel__item">
     <div class="carousel__content">
         <slot />
     </div>
  </div>
</template>

And use it like the following:

<template>
  <UCarousel >
      <SlideWrapper>Slide 1</SlideWrapper>
      <SlideWrapper>Slide 2</SlideWrapper>
      <SlideWrapper>Slide 3</SlideWrapper>
  </UCarousel>
</template>

If your data are strings, with no need for passing HTML elements you can simply go with

// UCarousel
<template>
  <Carousel v-show="items.length" :wrap-around="true" snap-align="center">
    <Slide v-for="(item, indx) in items" :key="indx">
      <div class="carousel__item">
        <div class="carousel__content">
          {{ item }}
        </div>
      </div>
    </Slide>

    <template #addons>
      <Navigation />
      <Pagination />
    </template>
  </Carousel>
</template>

And use it like the following:

<template>
  <UCarousel :items="[1, 2, 3]" />
</template>

[Anjali-Git-Hub]

`

`