Vue Bootstrap Carousel Component

Carousel with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Carousel component with Bootstrap styles for flexible, framework-consistent UI.

On this page

How it works

The Vue carousel is a slideshow for cycling within a group of content. It runs with a group of images, text, or html elements. It also incorporates support for previous/next buttons.

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Example

Carousels don’t automatically normalize slide dimensions. As such, you may want to use extra utilities or custom methods to properly size content. While carousels support previous/next controls and indicators, they’re not explicitly expected. Add and customize as you see fit.

Slides only

vue

<template>
  <CCarousel>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselItem } from '@coreui/vue'
</script>

With controls

Adding in the previous and next controls by controls property.

vue

<template>
  <CCarousel controls>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselItem } from '@coreui/vue'
</script>

With indicators

You can attach the indicators to the carousel, lengthwise the controls, too.

vue

<template>
  <CCarousel controls indicators>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselItem } from '@coreui/vue'
</script>

With captions

You can add captions to slides with the <CCarouselCaption> element within any <CCarouselItem>. They can be immediately hidden on smaller viewports, as shown below, with optional display utilities. We hide them with .d-none and draw them back on medium-sized devices with .d-md-block.

vue

<template>
  <CCarousel controls indicators>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselItem, CCarouselCaption } from '@coreui/vue'
</script>

Crossfade

Add transition="crossfade" to your carousel to animate slides with a fade transition instead of a slide.

vue

<template>
  <CCarousel controls indicators transition="crossfade">
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselItem } from '@coreui/vue'
</script>

Dark variant

Add dark property to the CCarousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls have additional Sass variables that customize the color and background-color.

vue

<template>
  <CCarousel controls indicators dark>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/vue.jpg" alt="slide 1" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/react.jpg" alt="slide 2" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
    <CCarouselItem>
      <img class="d-block w-100" src="/assets/img/angular.jpg" alt="slide 3" />
      <CCarouselCaption class="d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </CCarouselCaption>
    </CCarouselItem>
  </CCarousel>
</template>

<script setup>
import { CCarousel, CCarouselCaption, CCarouselItem } from '@coreui/vue'
</script>