显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

轮播

一个水平滚动的幻灯片行，支持吸附对齐与边缘感知的控件。

<flux:carousel track:class="rounded-lg overflow-hidden">    <flux:carousel.slide class="w-full">        <img src="https://fluxui.dev/img/carousel/seascape.png" class="aspect-16/9 rounded-lg object-cover" />    </flux:carousel.slide>    <flux:carousel.slide class="w-full">        <img src="https://fluxui.dev/img/carousel/woodscape.png" class="aspect-16/9 rounded-lg object-cover" />    </flux:carousel.slide>    <flux:carousel.slide class="w-full">        <img src="https://fluxui.dev/img/carousel/landscape.png" class="aspect-16/9 rounded-lg object-cover" />    </flux:carousel.slide></flux:carousel>

指示器

当箭头控件不必要或过于显眼时，添加幻灯片指示器以便直接导航。

“Flux 让我能在几天而不是几周内交付精致的 UI。这真的是我开发应用以来最愉快的体验。”

Graham Whitaker · Northwind 创始人

“每当我使用 Flux 组件时，它都能直接运作。默认值恰到好处，用起来真的很享受。”

Elise Rowan · Southline Studio 工程负责人

“我已经完全不再手写 UI 基础组件了。Flux + Livewire 是 Laravel 上最接近内容优先开发体验的方案。”

Jonah Vale · Alder & Co. 首席技术官

<flux:carousel class="w-full" indicators :arrows="false">    <flux:carousel.slide class="w-full">        <div class="flex flex-col items-center gap-4 text-center">            <img src="https://fluxui.dev/img/carousel/headshot1.png" class="size-14 rounded-full aspect-square object-cover">            <blockquote class="text-balance text-zinc-700 dark:text-zinc-300">&ldquo;Flux made it possible to ship a polished UI in days, not weeks. Genuinely the most fun I&rsquo;ve had building an app.&rdquo;</blockquote>            <div class="text-sm text-zinc-500"><span class="font-semibold text-zinc-700 dark:text-zinc-200">Graham Whitaker</span> &middot; Founder, Northwind</div>        </div>    </flux:carousel.slide>    <flux:carousel.slide class="w-full">        <div class="flex flex-col items-center gap-4 text-center">            <img src="https://fluxui.dev/img/carousel/headshot2.png" class="size-14 rounded-full aspect-square object-cover">            <blockquote class="text-balance text-zinc-700 dark:text-zinc-300">&ldquo;When I reach for a Flux component, it just works. The defaults are obvious. A real joy to use.&rdquo;</blockquote>            <div class="text-sm text-zinc-500"><span class="font-semibold text-zinc-700 dark:text-zinc-200">Elise Rowan</span> &middot; Engineering Lead, Southline Studio</div>        </div>    </flux:carousel.slide>    <flux:carousel.slide class="w-full">        <div class="flex flex-col items-center gap-4 text-center">            <img src="https://fluxui.dev/img/carousel/headshot3.png" class="size-14 rounded-full aspect-square object-cover">            <blockquote class="text-balance text-zinc-700 dark:text-zinc-300">&ldquo;I stopped writing UI primitives entirely. Flux + Livewire is the closest thing to a content-first dev experience for Laravel.&rdquo;</blockquote>            <div class="text-sm text-zinc-500"><span class="font-semibold text-zinc-700 dark:text-zinc-200">Jonah Vale</span> &middot; CTO, Alder & Co.</div>        </div>    </flux:carousel.slide></flux:carousel>

自动播放

按固定间隔自动切换幻灯片。当鼠标悬停、获得焦点或手动操作时，自动播放会暂停。

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

外部控件

使用共享的 name 将轮播控件放置在轮播布局之外。

热门住宿

精选风景胜地的优质房源

门多西诺的小屋

$680 · 2 晚・

5.0

千岛湖度假屋

$370 · 2 晚・

4.96

阿迪朗达克住宅

$550 · 2 晚・

4.88

科德角住宅

$840 · 2 晚・

<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>    <div>        <flux:carousel.controls name="popular-stays" />    </div></div><flux:carousel name="popular-stays" class="-mx-6" :arrows="false" track:class="px-6 scroll-px-6">    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">        <img src="https://fluxui.dev/img/carousel/house1.png" class="aspect-2/1 rounded-lg object-cover" />        <flux:heading class="mt-2">Cottage in Mendocino</flux:heading>        <div class="mt-1 flex gap-0.5 items-center">            <flux:text class="text-xs"><flux:link href="#" variant="ghost">$680</flux:link> for 2 nights ・</flux:text>            <div class="flex items-center gap-0.5">                <flux:icon icon="star" variant="micro" class="size-3" />                <flux:text class="text-xs text-zinc-800 dark:text-white">5.0</flux:text>            </div>        </div>    </flux:carousel.slide>    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">        <img src="https://fluxui.dev/img/carousel/house5.png" class="aspect-2/1 rounded-lg object-cover" />        <flux:heading class="mt-2">Lodge in the Thousand Islands</flux:heading>        <div class="mt-1 flex gap-0.5 items-center">            <flux:text class="text-xs"><flux:link href="#" variant="ghost">$370</flux:link> for 2 nights ・</flux:text>            <div class="flex items-center gap-0.5">                <flux:icon icon="star" variant="micro" class="size-3" />                <flux:text class="text-xs text-zinc-800 dark:text-white">4.96</flux:text>            </div>        </div>    </flux:carousel.slide>    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">        <img src="https://fluxui.dev/img/carousel/house6.png" class="aspect-2/1 rounded-lg object-cover" />        <flux:heading class="mt-2">House in the Adirondacks</flux:heading>        <div class="mt-1 flex gap-0.5 items-center">            <flux:text class="text-xs"><flux:link href="#" variant="ghost">$550</flux:link> for 2 nights ・</flux:text>            <div class="flex items-center gap-0.5">                <flux:icon icon="star" variant="micro" class="size-3" />                <flux:text class="text-xs text-zinc-800 dark:text-white">4.88</flux:text>            </div>        </div>    </flux:carousel.slide>    <flux:carousel.slide class="w-4/5 sm:w-1/2 md:w-1/3">        <img src="https://fluxui.dev/img/carousel/house4.png" class="aspect-2/1 rounded-lg object-cover" />        <flux:heading class="mt-2">House in Cape Cod</flux:heading>        <div class="mt-1 flex gap-0.5 items-center">            <flux:text class="text-xs"><flux:link href="#" variant="ghost">$840</flux:link> for 2 nights ・</flux:text>            <div class="flex items-center gap-0.5">                <flux:icon icon="star" variant="micro" class="size-3" />                <flux:text class="text-xs text-zinc-800 dark:text-white">5</flux:text>            </div>        </div>    </flux:carousel.slide></flux:carousel>

箭头位置

调整内置箭头控件相对于轮播视口的位置。

Inside

Overlap

Outside

<flux:carousel arrows:position="inside">...</flux:carousel><flux:carousel arrows:position="overlap">...</flux:carousel><flux:carousel arrows:position="outside">...</flux:carousel>

边缘渐隐

添加边缘渐隐效果，提示还有更多幻灯片可查看，同时不会遮挡箭头控件。

<flux:carousel fade class="-mx-6" track:class="px-6 scroll-px-6">    <!-- ... --></flux:carousel>

整页推进

使用整页推进可按可见幻灯片的数量移动，而非每次只移动一张。

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

参考

flux:carousel

属性	说明
arrows	若为 true，则在轮播上方显示上一张和下一张箭头控件。默认值：true。
arrows:position	内置箭头控件的位置。可选值：inside、overlap、outside。默认值：inside。
arrows:class	应用到内置箭头控件的附加 CSS 类。
autoplay	若为 true，则自动切换幻灯片。当鼠标悬停、获得焦点或手动操作时，自动播放会暂停；当用户偏好减少动画时会被禁用。
autoplay:interval	自动播放切换之间的时间间隔（毫秒）。默认值：5000。
indicators	若为 true，则在轮播下方显示幻灯片指示器。默认值：false。
disabled	若为 true，则禁用轮播控件和指示器。
fade	若为 true，则当存在溢出的额外幻灯片时，对可滚动轨道的边缘进行渐隐处理。
snap	滚动吸附行为。可选值：proximity、mandatory。默认值：proximity。
scroll	箭头和指示器的滚动行为。可选值：smooth、instant。默认值：smooth。
advance	箭头控件每次移动的幻灯片数量。可选值：slide、page。默认值：slide。
name	用于将轮播与外部控件关联的唯一名称。
track:class	应用到可滚动轨道的附加 CSS 类。

flux:carousel.slide

属性	说明
class	应用到幻灯片的 CSS 类。可使用宽度类（如 w-full、w-4/5 或 md:w-1/3）来控制同时可见的幻灯片数量。

flux:carousel.controls

属性	说明
name	这些外部控件所操作的轮播名称。