Carousel 轮播

基于 Embla Carousel 构建的轮播组件，支持手势滑动和动画效果。

组件特性

🔄 流畅动画：内置过渡动画和滑动手势支持。
▶️ 自动播放：通过 Embla 插件支持自动轮播。
↕️ 垂直方向：支持水平和垂直两种方向。
🎨 主题定制：基于 BrConfigProvider 支持全局主题定制，同时支持 TailwindCSS 局部样式覆盖。

基础用法

最基础的轮播展示。

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

自动播放

通过 plugins 属性配合 embla-carousel-autoplay 实现自动轮播。

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

垂直方向

设置 orientation="vertical" 切换为垂直模式，注意需要显式设置容器高度。

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

主题定制

结合 BrConfigProvider，可以全局覆盖组件默认样式，同时可以通过 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 说明

BrCarousel Props

属性	类型	默认值	说明
`opts`	`EmblaOptionsType`	`undefined`	Embla Carousel 配置选项
`plugins`	`EmblaPlugin[]`	`undefined`	Embla Carousel 插件列表
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	轮播方向
`class`	`string`	`undefined`	额外的 CSS 类名

BrCarousel 事件

事件	参数	说明
`init-api`	`BrCarouselApi`	Embla API 初始化后触发

BrCarousel 暴露

属性	类型	说明
`carouselApi`	`Ref<BrCarouselApi>`	Embla API 实例
`canScrollPrev`	`Ref<boolean>`	是否可以向前滚动
`canScrollNext`	`Ref<boolean>`	是否可以向后滚动
`scrollPrev`	`() => void`	滚动到上一张
`scrollNext`	`() => void`	滚动到下一张

BrCarouselPrevious / BrCarouselNext Props

属性	类型	默认值	说明
`variant`	`ButtonVariant`	`'outline'`	按钮样式变体
`size`	`ButtonSize`	`'icon'`	按钮大小
`class`	`string`	`undefined`	额外的 CSS 类名

BrCarouselContent / BrCarouselItem Props

属性	类型	默认值	说明
`class`	`string`	`undefined`	额外的 CSS 类名

组合式函数

import { useCarousel } from '@breezeui/vue'
// 必须在 BrCarousel 组件内部调用
const { scrollPrev, scrollNext, canScrollPrev, canScrollNext, carouselApi, orientation } = useCarousel()

#Carousel 轮播

#组件特性

#基础用法

#自动播放

#垂直方向

#主题定制

#API 说明

#BrCarousel Props

#BrCarousel 事件

#BrCarousel 暴露

#BrCarouselPrevious / BrCarouselNext Props

#BrCarouselContent / BrCarouselItem Props

#组合式函数