跳转到内容
AsterUI v0.12.76

Carousel 轮播图

带导航控件、指示器和自动播放支持的旋转内容轮播图。

引入

Section titled “引入”
import { Carousel } from 'asterui'

示例

Section titled “示例”

基本轮播图

带导航控件和指示器的简单轮播图。

Slide 1
 
import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

自动播放

自动推进幻灯片的轮播图。悬停时暂停。

Slide 1
 
import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel autoplay autoplaySpeed={2000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

淡入淡出效果

使用淡入淡出过渡而不是滑动的轮播图。

Slide 1
 
import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel effect="fade" autoplay autoplaySpeed={3000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/10/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/11/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/12/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

垂直轮播图

垂直方向的轮播图。

Slide 1
 
import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel vertical className="h-48 w-full max-w-md">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/4/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/5/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/6/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

无箭头

隐藏箭头的轮播图，仅使用点导航。

Slide 1
 
import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel arrows={false} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/7/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/8/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/9/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

点位置

在不同位置放置指示器点。

Top Dots
Start Dots
 
import { Carousel, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Carousel dotPlacement="top" className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-info text-info-content h-full flex items-center justify-center">Top Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-success text-success-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
        <Carousel dotPlacement="start" arrows={false} className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-warning text-warning-content h-full flex items-center justify-center">Start Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-error text-error-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
      </Space>
    )
}

export default App

自定义内容

带卡片等自定义幻灯片内容的轮播图。

Feature 1

Discover amazing features

 
import { Carousel, Card, Button } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md">
        <Carousel.Item>
          <Card title="Feature 1" className="bg-base-200 h-full">
            <p>Discover amazing features</p>
            <Button color="primary" size="sm">Learn More</Button>
          </Card>
        </Carousel.Item>
        <Carousel.Item>
          <Card title="Feature 2" className="bg-base-200 h-full">
            <p>Powerful and flexible</p>
            <Button color="secondary" size="sm">Explore</Button>
          </Card>
        </Carousel.Item>
      </Carousel>
    )
}

export default App

API

Section titled “API”
Section titled “Carousel”
属性描述类型默认值
children轮播图幻灯片（Carousel.Item 组件）ReactNode-
activeIndex当前幻灯片索引（受控模式）number-
defaultActiveIndex默认幻灯片索引（非受控模式）number0
autoplay自动推进幻灯片booleanfalse
autoplaySpeed自动播放间隔（毫秒）number3000
speed动画持续时间（毫秒）number500
arrows显示上一个/下一个导航箭头booleantrue
dots显示幻灯片指示器点boolean | { className?: string }true
dotPlacement指示器点的位置'top' | 'bottom' | 'start' | 'end''bottom'
effect过渡效果'scrollx' | 'fade''scrollx'
infinite启用无限循环booleantrue
pauseOnHover悬停时暂停自动播放booleantrue
vertical垂直轮播图方向booleanfalse
beforeChange幻灯片改变前的回调函数(current: number, next: number) => void-
afterChange幻灯片改变后的回调函数(current: number) => void-
className额外的 CSS 类名string-
data-testid测试 ID；子元素使用此作为前缀string-

Carousel.Item

Section titled “Carousel.Item”
属性描述类型默认值
children幻灯片内容ReactNode-
className额外的 CSS 类名string-
data-testid测试 IDstring-

CarouselRef 方法

Section titled “CarouselRef 方法”
属性描述类型默认值
goTo导航到特定幻灯片(index: number, animate?: boolean) => void-
next转到下一张幻灯片() => void-
prev转到上一张幻灯片() => void-

使用提示

Section titled “使用提示”
  • 使用 Carousel.Item 包裹每张幻灯片
  • 在 Carousel 上设置固定高度以获得一致的布局
  • 自动播放在悬停时暂停以获得更好的用户体验
  • 轮播图获得焦点时使用方向键导航
  • 通过 ref 访问 goTo、next、prev 方法