轮播图 - Semi Design Next

代码演示

如何引入

import { Carousel, Radio, RadioGroup, Space, Typography } from '@fibrous/semi-ui-solid';

基本用法

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

代码

import { For, type JSX } from 'solid-js';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi Template',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px', color: '#1C1F23' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    return (
        <Carousel style={{ width: '100%', height: '400px' }} theme="dark">
            <For each={slides}>
                {(slide) => (
                    <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                        <Space vertical align="start" spacing="medium" style={titleStyle}>
                            <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                            <Typography.Title heading={2} style={colorStyle}>
                                {slide.title}
                            </Typography.Title>
                            <Space vertical align="start">
                                <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                            </Space>
                        </Space>
                    </div>
                )}
            </For>
        </Carousel>
    );
}

主题切换

默认定义了三种主题： primary、light、dark

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

主题

primary

light

dark

代码

import { createSignal, For, type JSX } from 'solid-js';
import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    const [theme, setTheme] = createSignal<CarouselProps['theme']>('primary');

    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} theme={theme()} autoPlay={false}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
            <br />
            <Space>
                <div>主题</div>
                <RadioGroup onChange={(e) => setTheme(e.target.value)} value={theme()} type="button">
                    <Radio value="primary">primary</Radio>
                    <Radio value="light">light</Radio>
                    <Radio value="dark">dark</Radio>
                </RadioGroup>
            </Space>
        </div>
    );
}

指示器

指示器可以调节类型、位置、尺寸
类型： dot、line、columnar
位置： left、center、right
尺寸： small、medium

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma前端代码一键转

代码

import { createSignal, For, type JSX } from 'solid-js';
import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma前端代码一键转'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    const [size, setSize] = createSignal<CarouselProps['indicatorSize']>('small');
    const [type, setType] = createSignal<CarouselProps['indicatorType']>('dot');
    const [position, setPosition] = createSignal<CarouselProps['indicatorPosition']>('left');

    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} indicatorType={type()} indicatorPosition={position()} indicatorSize={size()} theme="dark" autoPlay={false}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
            <br />
            <Space vertical align="start">
                <Space>
                    <div>类型</div>
                    <RadioGroup onChange={(e) => setType(e.target.value)} value={type()} type="button">
                        <Radio value="dot">dot</Radio>
                        <Radio value="line">line</Radio>
                        <Radio value="columnar">columnar</Radio>
                    </RadioGroup>
                </Space>
                <Space>
                    <div>位置</div>
                    <RadioGroup onChange={(e) => setPosition(e.target.value)} value={position()} type="button">
                        <Radio value="left">left</Radio>
                        <Radio value="center">center</Radio>
                        <Radio value="right">right</Radio>
                    </RadioGroup>
                </Space>
                <Space>
                    <div>尺寸</div>
                    <RadioGroup onChange={(e) => setSize(e.target.value)} value={size()} type="button">
                        <Radio value="small">small</Radio>
                        <Radio value="medium">medium</Radio>
                    </RadioGroup>
                </Space>
            </Space>
        </div>
    );
}

箭头

通过 showArrow 属性控制箭头是否可见
如果箭头可见，通过 arrowType 属性控制箭头展示的时机

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

展示箭头

show

hide

展示时机

always

hover

代码

import { createSignal, For, type JSX } from 'solid-js';
import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    const [arrowType, setArrowType] = createSignal<CarouselProps['arrowType']>('always');
    const [show, setShow] = createSignal(true);

    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} showArrow={show()} arrowType={arrowType()} theme="dark" autoPlay={false}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
            <br />
            <Space vertical align="start">
                <Space>
                    <div>展示箭头</div>
                    <RadioGroup onChange={(e) => setShow(e.target.value)} value={show()} type="button">
                        <Radio value>show</Radio>
                        <Radio value={false}>hide</Radio>
                    </RadioGroup>
                </Space>
                <Space>
                    <div>展示时机</div>
                    <RadioGroup onChange={(e) => setArrowType(e.target.value)} value={arrowType()} type="button">
                        <Radio value="always">always</Radio>
                        <Radio value="hover">hover</Radio>
                    </RadioGroup>
                </Space>
            </Space>
        </div>
    );
}

定制箭头

通过 leftArrow、rightArrow 属性传入箭头图标，传 null 时按钮内容为空；通过 arrowProps 的 leftArrow、rightArrow 传入按钮属性（props，如 aria-label）。

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

代码

import { For, type JSX } from 'solid-js';
import { IconArrowLeft, IconArrowRight } from '@fibrous/semi-icons-solid';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

const arrowProps = {
    leftArrow: { props: { 'aria-label': '上一张' } },
    rightArrow: { props: { 'aria-label': '下一张' } },
};

export default function CarouselDemo() {
    return (
        <div>
            <Carousel theme="dark" style={{ width: '100%', height: '400px' }} autoPlay={false} arrowProps={arrowProps} leftArrow={<IconArrowLeft size="large" />} rightArrow={<IconArrowRight size="large" />}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
        </div>
    );
}

播放参数

通过给 autoPlay 传入参数 interval 控制两张图片之间的时间间隔，传入 hoverToPause 控制鼠标放置在图片上时是否停止播放

挂载时幻灯片不超过 1 张则不播放，之后增加到多张时按 autoPlay 的配置开始自动播放。

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

代码

import { For, type JSX } from 'solid-js';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} autoPlay={{ interval: 1500, hoverToPause: true }} theme="dark">
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
        </div>
    );
}

动画效果与切换速度

通过给 animation 属性控制动画，可选值有 fade，slide
通过给 speed 属性控制两张图片之间的切换时间，单位为ms

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

代码

import { For, type JSX } from 'solid-js';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} speed={1000} animation="fade" theme="dark" autoPlay={false}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
        </div>
    );
}

受控的轮播图

用 activeIndex 绑定当前索引；onChange(index, preIndex) 给出新索引和上一个索引。

Semi 设计管理系统

从 Semi Design，到 Any Design

快速定制你的设计系统，并应用在设计稿和代码中

Semi 物料市场

面向业务场景的定制化组件，支持线上预览和调试

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma 设计模板一键转为真实前端代码

代码

import { createSignal, For, type JSX } from 'solid-js';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-solid';

const logo = '/assets/placeholder/logo.svg';

const slides = [
    {
        src: '/assets/carousel/bg-1.png',
        title: 'Semi 设计管理系统',
        lines: ['从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
    },
    {
        src: '/assets/carousel/bg-2.png',
        title: 'Semi 物料市场',
        lines: ['面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
    },
    {
        src: '/assets/carousel/bg-3.png',
        title: 'Semi 设计/代码模板',
        lines: ['高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    },
];

const titleStyle: JSX.CSSProperties = { position: 'absolute', top: '100px', left: '100px' };
const colorStyle: JSX.CSSProperties = { color: '#1C1F23' };

export default function CarouselDemo() {
    const [activeIndex, setActiveIndex] = createSignal(0);

    return (
        <div>
            <Carousel style={{ width: '100%', height: '400px' }} activeIndex={activeIndex()} autoPlay={false} theme="dark" onChange={(index) => setActiveIndex(index)}>
                <For each={slides}>
                    {(slide) => (
                        <div style={{ 'background-size': 'cover', 'background-image': `url('${slide.src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                <img src={logo} alt="semi_logo" style={{ width: '87px', height: '31px' }} />
                                <Typography.Title heading={2} style={colorStyle}>
                                    {slide.title}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[0]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{slide.lines[1]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    )}
                </For>
            </Carousel>
        </div>
    );
}

API 参考

Props

属性	说明	类型	默认值
activeIndex	当前展示的索引，传入即为受控；传 `undefined` 时交还内部状态，从最后一次的索引继续。	`number`	-
animation	切换动画，可选 `slide` 或 `fade`。	`'slide' \| 'fade'`	`"slide"`
aria-label	轮播区域的名称，有名称时才是地标。	`string`	-
arrowProps	上一项、下一项箭头按钮的属性：`leftArrow`、`rightArrow` 的 `props` 为按钮的原生属性（如 `aria-label`、`style`、`onClick`）。`props` 展开在内置属性之后，同名的 `onClick` 与 `class` 会覆盖内置处理与内置类名。箭头内容用 `leftArrow`、`rightArrow` 属性。	`ArrowProps`	-
arrowType	箭头展示时机，可选 `always` 或 `hover`。	`'always' \| 'hover'`	`"always"`
autoPlay	是否自动循环播放，也可传入 `{ interval, hoverToPause }`：`interval` 为切换间隔（毫秒，默认 2000），`hoverToPause` 为悬浮时是否暂停（默认 true）。	`CarouselAutoPlay`	`true`
children	幻灯片，每个直接子元素是一张。幻灯片需要是 DOM 元素，Carousel 会直接修改它的 `id`、`role`、`inert`、`class` 等属性。	`JSX.Element`	-
class	根元素的类名，与内置类名合并。	`string`	-
defaultActiveIndex	初始展示的索引，非受控时使用。	`number`	`0`
indicatorPosition	指示器位置，可选 `left`、`center` 或 `right`。	`'left' \| 'center' \| 'right'`	`"center"`
indicatorSize	指示器尺寸，可选 `small` 或 `medium`。	`'small' \| 'medium'`	`"small"`
indicatorType	指示器类型，可选 `dot`、`line` 或 `columnar`。	`'columnar' \| 'line' \| 'dot'`	`"dot"`
leftArrow	替换上一项箭头的图标；传 `null` 时按钮内容为空。	`JSX.Element`	-
onChange	切换到新的一项时触发，参数为新索引和上一个索引。	`Type`	-
ref	根元素（`role="region"` 的 `div`），其上挂有下方 Methods 中的方法。	`Type`	-
rightArrow	替换下一项箭头的图标；传 `null` 时按钮内容为空。	`JSX.Element`	-
showArrow	是否展示箭头。	`boolean`	`true`
showIndicator	是否展示指示器。	`boolean`	`true`
slideDirection	动画为 `slide` 时的滑动方向，可选 `left` 或 `right`。	`'left' \| 'right'`	`"left"`
speed	切换速度，单位为毫秒。	`number`	`300`
theme	指示器和箭头的主题，可选 `primary`、`light` 或 `dark`。	`'dark' \| 'primary' \| 'light'`	`"light"`
trigger	指示器触发切换的时机，可选 `click` 或 `hover`。	`'click' \| 'hover'`	`"click"`

Methods

方法	说明	类型
goTo	切换到指定索引，超出范围时循环。	`Type`
next	切换到下一项。	`Type`
play	开始自动播放，`autoPlay` 为 `false` 时同样生效。	`Type`
prev	切换到上一项。	`Type`
stop	停止自动播放，之后手动切换也不会恢复，直到调用 `play()`。	`Type`

class、style、ref 与原生属性（包括 aria-label、aria-labelledby）落在根元素（role="region"）上。

Accessibility

Carousel 按 WAI-ARIA Carousel 实现。

ARIA

根元素是 role="region"，aria-roledescription 为「轮播」。region 需要名称才会成为地标，请用 aria-label 或 aria-labelledby 说明这组轮播的内容
显示指示器时，每张幻灯片是对应指示点（tab）的 tabpanel，二者用 aria-controls、aria-labelledby 关联；幻灯片上已有的 id 会被沿用。不显示指示器时，幻灯片是 role="group"，aria-roledescription 为「轮播项」，名称为「第 N 项」
非当前的幻灯片带 inert，其中的内容不可聚焦，也不会被读屏读到。幻灯片需要是能接收 inert、role、id 等属性并落到 DOM 上的元素或组件（与类名、样式相同）
自动播放时幻灯片容器为 aria-live="off"，停止播放后为 polite，用户手动切换的幻灯片会被读出，自动切换的不会
箭头按钮默认以语言包命名（「上一项」「下一项」）；自定义的箭头内容里有可读文字（文本或带 aria-label 的元素）时以内容为名；arrowProps.leftArrow.props['aria-label'] 等传入的名称优先于两者

键盘和焦点

键盘焦点进入轮播（任一箭头、指示点或幻灯片中的可聚焦内容）时暂停自动播放，焦点离开后恢复（APG 建议焦点离开后保持停止，此处与之不同）；在焦点内用键盘切换也不会重新开始播放。鼠标点击箭头不会暂停；
上一项、下一项箭头是原生 button，可以用 Tab 聚焦，Enter 或 Space 触发切换；
指示器是 tablist，其中只有当前项在 Tab 序列里；焦点在指示器上时：
- 左箭头 切换到上一项，右箭头 切换到下一项，首尾循环，焦点跟随到新的当前项；在 RTL 下方向相反；
- Home 切换到第一项，End 切换到最后一项。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$transition_duration_carousel_indicator-bg	var(--semi-transition_delay-none)
$transition_function_carousel_indicator-bg	var(--semi-transition_function-easeOut)
$transition_delay_carousel_indicator-bg	var(--semi-transition_delay-none)
$transition_duration_carousel_arrow-bg	var(--semi-transition_delay-none)
$transition_funciton_carousel_arrow-bg	var(--semi-transition_function-easeOut)
$transition_delay_carousel_arrow-bg	var(--semi-transition_delay-none)
$color-carousel_indicator_theme_dark-bg-default	rgb(from var(--semi-black) r g b / 0.5)
$color-carousel_indicator_theme_dark-bg-hover	rgb(from var(--semi-black) r g b / 0.7)
$color-carousel_indicator_theme_dark-bg-active	var(--semi-black)
$color-carousel_indicator_theme_primary-bg-default	rgb(from var(--semi-blue-6) r g b / 0.4)
$color-carousel_indicator_theme_primary-bg-hover	rgb(from var(--semi-blue-6) r g b / 0.7)
$color-carousel_indicator_theme_primary-bg-active	var(--semi-blue-6)
$color-carousel_indicator_theme_light-bg-default	rgb(from var(--semi-white) r g b / 0.4)
$color-carousel_indicator_theme_light-bg-hover	rgb(from var(--semi-white) r g b / 0.7)
$color-carousel_indicator_theme_light-bg-active	var(--semi-white)
$color-carousel_arrow_theme_dark-bg-default	rgb(from var(--semi-black) r g b / 0.5)
$color-carousel_arrow_theme_dark-bg-hover	var(--semi-black)
$color-carousel_arrow_theme_primary-bg-default	rgb(from var(--semi-blue-6) r g b / 0.4)
$color-carousel_arrow_theme_primary-bg-hover	var(--semi-blue-6)
$color-carousel_arrow_theme_light-bg-default	rgb(from var(--semi-white) r g b / 0.4)
$color-carousel_arrow_theme_light-bg-hover	var(--semi-white)
$width-carousel_indicator_line	240px
$width-carousel_indicator_columnar_small	4px
$width-carousel_indicator_columnar_medium	6px
$width-carousel_indicator_dot_small	8px
$width-carousel_indicator_dot_medium	12px
$width-carousel_arrow	32px
$radius-carousel_arrow	50%	decides the keyboard focus ring shape
$height-carousel_indicator_columnar_small_default	12px
$height-carousel_indicator_columnar_small_active	20px
$height-carousel_indicator_columnar_medium_default	20px
$height-carousel_indicator_columnar_medium_active	28px
$height-carousel_indicator_line_small	4px
$height-carousel_indicator_line_medium	6px
$radius-carousel_indicator_dot	50%
$spacing-carousel_indicator-padding	32px
$spacing-carousel_indicator_columnar-marginX	4px
$spacing-carousel_indicator_line-marginX	4px
$spacing-carousel_indicator_dot-marginX	8px
$spacing-carousel_arrow-left	20px
$spacing-carousel_arrow-right	20px