Carousel

A carousel with motion and swipe built using Embla Carousel.

Component Features

🔄 Smooth Animation: Built-in transition and swipe gesture support.
▶️ Autoplay: Supports automatic playback via Embla plugins.
↕️ Vertical Mode: Supports both horizontal and vertical orientations.
🎨 Theme Customization: Supports global theme customization via BrConfigProvider and local style overrides with TailwindCSS.

Basic Usage

The most basic carousel display.

<script setup lang="ts">
import {
  BrCarousel,
  BrCarouselContent,
  BrCarouselItem,
  BrCarouselNext,
  BrCarouselPrevious,
} from '@breezeui/vue'

const colors = [
  'bg-red-100 dark:bg-red-950',
  'bg-orange-100 dark:bg-orange-950',
  'bg-amber-100 dark:bg-amber-950',
  'bg-green-100 dark:bg-green-950',
  'bg-blue-100 dark:bg-blue-950',
  'bg-purple-100 dark:bg-purple-950',
]
</script>

<template>
  <BrCarousel class="w-full max-w-xs">
    <BrCarouselContent>
      <BrCarouselItem v-for="(_, index) in colors" :key="index">
        <div class="p-1">
          <div :class="[colors[index], 'flex items-center justify-center rounded-lg h-[160px]']">
            <span class="text-4xl font-semibold">{{ index + 1 }}</span>
          </div>
        </div>
      </BrCarouselItem>
    </BrCarouselContent>
    <BrCarouselPrevious />
    <BrCarouselNext />
  </BrCarousel>
</template>

Autoplay

Use the plugins prop with embla-carousel-autoplay to enable automatic slide transitions.

<script setup lang="ts">
import Autoplay from 'embla-carousel-autoplay'
import {
  BrCarousel,
  BrCarouselContent,
  BrCarouselItem,
  BrCarouselNext,
  BrCarouselPrevious,
} from '@breezeui/vue'

const colors = [
  'bg-red-100 dark:bg-red-950',
  'bg-orange-100 dark:bg-orange-950',
  'bg-amber-100 dark:bg-amber-950',
  'bg-green-100 dark:bg-green-950',
  'bg-blue-100 dark:bg-blue-950',
  'bg-purple-100 dark:bg-purple-950',
]
</script>

<template>
  <BrCarousel
    class="w-full max-w-xs"
    :plugins="[Autoplay({ delay: 2000 })]"
  >
    <BrCarouselContent>
      <BrCarouselItem v-for="(_, index) in colors" :key="index">
        <div class="p-1">
          <div :class="[colors[index], 'flex items-center justify-center rounded-lg h-[160px]']">
            <span class="text-4xl font-semibold">{{ index + 1 }}</span>
          </div>
        </div>
      </BrCarouselItem>
    </BrCarouselContent>
    <BrCarouselPrevious />
    <BrCarouselNext />
  </BrCarousel>
</template>

Vertical

Set orientation="vertical" to switch to vertical mode. Note that you need to explicitly set the container height.

<script setup lang="ts">
import {
  BrCarousel,
  BrCarouselContent,
  BrCarouselItem,
  BrCarouselNext,
  BrCarouselPrevious,
} from '@breezeui/vue'

const colors = [
  'bg-red-100 dark:bg-red-950',
  'bg-orange-100 dark:bg-orange-950',
  'bg-amber-100 dark:bg-amber-950',
  'bg-green-100 dark:bg-green-950',
  'bg-blue-100 dark:bg-blue-950',
  'bg-purple-100 dark:bg-purple-950',
]
</script>

<template>
  <BrCarousel orientation="vertical" class="w-full max-w-xs h-[244px]">
    <BrCarouselContent class="-mt-1 h-[200px]">
      <BrCarouselItem v-for="(_, index) in colors" :key="index" class="pt-1">
        <div>
          <div :class="[colors[index], 'flex items-center justify-center rounded-lg h-[120px]']">
            <span class="text-4xl font-semibold">{{ index + 1 }}</span>
          </div>
        </div>
      </BrCarouselItem>
    </BrCarouselContent>
    <BrCarouselPrevious />
    <BrCarouselNext />
  </BrCarousel>
</template>

Theme Customization

Combined with BrConfigProvider, you can globally override the default styles of the component. At the same time, styles can be overridden locally via TailwindCSS.

<script setup lang="ts">
import {
  BrCarousel,
  BrCarouselContent,
  BrCarouselItem,
  BrCarouselNext,
  BrCarouselPrevious,
  BrConfigProvider,
} from '@breezeui/vue'

const colors = [
  'bg-red-100 dark:bg-red-950',
  'bg-orange-100 dark:bg-orange-950',
  'bg-amber-100 dark:bg-amber-950',
  'bg-green-100 dark:bg-green-950',
  'bg-blue-100 dark:bg-blue-950',
  'bg-purple-100 dark:bg-purple-950',
]
</script>

<template>
  <BrConfigProvider
    :theme="{
      light: {
        radius: '1rem',
        primary: '220 90% 56%',
      },
      dark: {
        radius: '1rem',
        primary: '220 90% 56%',
      },
    }"
  >
    <BrCarousel class="w-full max-w-xs">
      <BrCarouselContent>
        <BrCarouselItem v-for="(_, index) in colors" :key="index">
          <div class="p-1">
            <div :class="[colors[index], 'flex items-center justify-center rounded-lg h-[160px]']">
              <span class="text-4xl font-semibold text-primary">{{ index + 1 }}</span>
            </div>
          </div>
        </BrCarouselItem>
      </BrCarouselContent>
      <BrCarouselPrevious class="border-primary/30 hover:bg-primary/10" />
      <BrCarouselNext class="border-primary/30 hover:bg-primary/10" />
    </BrCarousel>
  </BrConfigProvider>
</template>

API Reference

BrCarousel Props

Name	Type	Default	Description
`opts`	`EmblaOptionsType`	`undefined`	Embla Carousel options
`plugins`	`EmblaPlugin[]`	`undefined`	Embla Carousel plugins
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Carousel direction
`class`	`string`	`undefined`	Additional CSS classes

BrCarousel Events

Name	Payload	Description
`init-api`	`BrCarouselApi`	Fired when Embla API is initialized

BrCarousel Expose

Name	Type	Description
`carouselApi`	`Ref<BrCarouselApi>`	Embla API instance
`canScrollPrev`	`Ref<boolean>`	Whether scrolling back is possible
`canScrollNext`	`Ref<boolean>`	Whether scrolling forward is possible
`scrollPrev`	`() => void`	Scroll to previous slide
`scrollNext`	`() => void`	Scroll to next slide

BrCarouselPrevious / BrCarouselNext Props

Name	Type	Default	Description
`variant`	`ButtonVariant`	`'outline'`	Button variant
`size`	`ButtonSize`	`'icon'`	Button size
`class`	`string`	`undefined`	Additional CSS classes

BrCarouselContent / BrCarouselItem Props

Name	Type	Default	Description
`class`	`string`	`undefined`	Additional CSS classes

Composable

import { useCarousel } from '@breezeui/vue'
// Must be called within a BrCarousel component
const { scrollPrev, scrollNext, canScrollPrev, canScrollNext, carouselApi, orientation } = useCarousel()

#Carousel

#Component Features

#Basic Usage

#Autoplay

#Vertical

#Theme Customization

#API Reference

#BrCarousel Props

#BrCarousel Events

#BrCarousel Expose

#BrCarouselPrevious / BrCarouselNext Props

#BrCarouselContent / BrCarouselItem Props

#Composable