Vue Carousel - Flowbite

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

Basic Carousel

<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

<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

<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

<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

<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