Skip to content

# Vue Carousel - Flowbite ​

Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options

## Basic Carousel ​

vue

    <template>
      <fwb-carousel :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

    <template>
      <fwb-carousel :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

## Carousel without controls ​

vue

    <template>
      <fwb-carousel no-controls :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

    <template>
      <fwb-carousel no-controls :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

## Carousel without indicators ​

vue

    <template>
      <fwb-carousel no-indicators :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

    <template>
      <fwb-carousel no-indicators :pictures="pictures" />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

## Carousel with slide animation ​

vue

    <template>
      <fwb-carousel :pictures="pictures" slide />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

    <template>
      <fwb-carousel :pictures="pictures" slide />
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

## Carousel with slide and custom interval ​

vue

    <template>
      <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

    <template>
      <fwb-carousel :pictures="pictures" slide :slide-interval="1000"/>
    </template>

    <script setup>
    import { FwbCarousel } from 'flowbite-vue'

    const pictures = [
      {src: '/images/img-1.svg', alt: 'Image 1'},
      {src: '/images/img-2.svg', alt: 'Image 2'},
      {src: '/images/img-3.svg', alt: 'Image 3'},
    ]
    </script>

## Carousel API ​

### Props ​

Name | Type | Values | Default
--- | --- | --- | ---
animation | Boolean | `true`, `false` | `false`
noControls | Boolean | `true`, `false` | `false`
noIndicators | Boolean | `true`, `false` | `false`
pictures | Array | `[{source: '', alt: ''}, ...]` | `[]`
slide | Boolean | `true`, `false` | `false`
slideInterval | Number |  | `3000`