Demo

Source Code

<template>
  <b-container
    v-if="items || imageSrc"
    class="CarouselSection"
    :class="backgroundClass"
    fluid
  >
    <b-container class="CarouselSection__container">
      <b-carousel id="carousel-1" :interval="4000" indicators>
        <b-carousel-slide v-for="item in items" :key="item.key">
          <template #img>
            <img
              v-if="assetType(item.filename) === 'image'"
              class="d-block img-fluid w-100"
              :src="imgSrc(item)"
              alt="image slot"
            />
            <video
              v-if="assetType(item.filename) === 'video'"
              autoplay
              class="d-block img-fluid w-100 CarouselSection__video"
              controls
            >
              <source :src="item.filename" type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </template>
        </b-carousel-slide>
      </b-carousel>
    </b-container>
  </b-container>
</template>

props

variant: { type: String, default: '' },
items: { type: Array, default: null },
imageSrc: { type: String }

...