flowbite-vue/docs/components/carousel.md

<script setup> import FwbCarouselExample from './carousel/examples/FwbCarouselExample.vue' import FwbCarouselExamplePictures from './carousel/examples/FwbCarouselExamplePictures.vue' import FwbCarouselExampleSlide from './carousel/examples/FwbCarouselExampleSlide.vue' import FwbCarouselExampleSlideInterval from './carousel/examples/FwbCarouselExampleSlideInterval.vue' import FwbCarouselExampleWithoutControls from './carousel/examples/FwbCarouselExampleWithoutControls.vue' import FwbCarouselExampleWithoutIndicators from './carousel/examples/FwbCarouselExampleWithoutIndicators.vue' </script>

Vue Carousel - Flowbite

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

Basic Carousel

```vue <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

<fwb-carousel-example-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>

Carousel without indicators

```vue <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

<fwb-carousel-example-slide />
```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>

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