轮播组件（ Carousel）

Version ^2.15.0

Flux 现在内置了一个 Carousel（轮播）组件。图片画廊、客户评价轮播、产品展示、精选房源——任何你需要滚动展示的内容，它都开箱即用。

让我们来看一看。

吸附与滚动

放入一个 flux:carousel，并按需添加任意数量的幻灯片。每张幻灯片都会自然地吸附到位，箭头控件会自动出现——当你滑到任一端时，它们甚至会自动隐藏：

<flux:carousel>
    <flux:carousel.slide class="w-full">
        <img src="/img/seascape.png" class="aspect-16/9 rounded-lg object-cover" />
    </flux:carousel.slide>
    <flux:carousel.slide class="w-full">
        <img src="/img/woodscape.png" class="aspect-16/9 rounded-lg object-cover" />
    </flux:carousel.slide>
    <!-- ... -->
</flux:carousel>

幻灯片可以是任意宽度——用 w-full 实现单张幻灯片画廊，用 w-1/3 实现多卡片布局，或使用响应式类（如 w-4/5 sm:w-1/2 md:w-1/3）在不同断点下自适应。

外部控件

对于精选房源或产品行这类布局，你大概不希望箭头按钮浮在内容上方。使用共享的 name，即可把控件放置在页面的任意位置：

<div class="flex justify-between items-center mb-4">
    <div>
        <flux:heading size="lg">Popular stays</flux:heading>
        <flux:text>Handpicked homes in beautiful places</flux:text>
    </div>
    <flux:carousel.controls name="popular-stays" />
</div>
<flux:carousel name="popular-stays" :arrows="false">
    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">
        <!-- ... -->
    </flux:carousel.slide>
</flux:carousel>

这些控件会保持同步——在到达两端时会自动禁用，与内置箭头的行为完全一致。

按页推进

默认情况下，箭头控件每次移动一张幻灯片。设置 advance="page" 即可按当前可见的幻灯片数量跳转——对于包含大量项目的网格来说体验更佳：

<flux:carousel advance="page">
    <!-- ... -->
</flux:carousel>

指示器与自动播放

对于客户评价这类较简单的轮播，可以用圆点指示器替换箭头。再加上自动播放，幻灯片就会自行切换——并在鼠标悬停或获得焦点时自动暂停：

<flux:carousel indicators autoplay autoplay:interval="3500">
    <!-- ... -->
</flux:carousel>

无障碍

当然，我们花了大量精力确保该组件遵循预期的键盘导航、焦点行为以及恰当的 aria-label，让屏幕阅读器也能同样顺畅地使用它。

查看 carousel 文档 →