轮播图 - Semi Design Next

代码演示

如何引入

import { Carousel } from '@fibrous/semi-ui-react';

基本用法

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

代码

import type { CSSProperties } from 'react';
import { Carousel, Typography, Space } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const { Title, Paragraph } = Typography;

    const style = {
        width: '100%',
        height: '400px',
    };

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

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <Carousel style={style} theme="dark">
            {imgList.map((src, index) => {
                return (
                    <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                        <Space vertical align="start" spacing="medium" style={titleStyle}>
                            {renderLogo()}
                            <Title heading={2} style={colorStyle}>
                                {textList[index][0]}
                            </Title>
                            <Space vertical align="start">
                                <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                            </Space>
                        </Space>
                    </div>
                );
            })}
        </Carousel>
    );
}

主题切换

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

主题

primary

light

dark

代码

import { useState, type CSSProperties } from 'react';
import { Carousel, RadioGroup, Radio, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const { Title, Paragraph } = Typography;
    const [theme, setTheme] = useState<CarouselProps['theme']>('primary');

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <div>
            <Carousel style={style} theme={theme} autoPlay={false}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Title>
                                <Space vertical align="start">
                                    <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                    <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </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 { useState, type CSSProperties } from 'react';
import { Carousel, RadioGroup, Radio, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-react';

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

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <div>
            <Carousel style={style} indicatorType={type} indicatorPosition={position} indicatorSize={size} theme="dark" autoPlay={false}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Title>
                                <Space vertical align="start">
                                    <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                    <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </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 { useState, type CSSProperties } from 'react';
import { Carousel, RadioGroup, Radio, Space, Typography, type CarouselProps } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const { Title, Paragraph } = Typography;
    const [arrowType, setArrowType] = useState<CarouselProps['arrowType']>('always');
    const [show, setShow] = useState(true);

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <div>
            <Carousel style={style} showArrow={show} arrowType={arrowType} theme="dark" autoPlay={false}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Title>
                                <Space vertical align="start">
                                    <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                    <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </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>
    );
}

定制箭头

通过 arrowProps 属性定制箭头样式和点击事件

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

import type { CSSProperties } from 'react';
import { IconArrowLeft, IconArrowRight } from '@fibrous/semi-icons-react';
import { Carousel, Typography, Space } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];
    const textList = [
        ['Semi 设计管理系统', '从 Semi Design，到 Any Design', '快速定制你的设计系统，并应用在设计稿和代码中'],
        ['Semi 物料市场', '面向业务场景的定制化组件，支持线上预览和调试', '内容由 Semi Design 用户共建'],
        ['Semi 设计/代码模板', '高效的 Design2Code 设计稿转代码', '海量 Figma 设计模板一键转为真实前端代码'],
    ];
    const arrowProps = {
        leftArrow: { children: <IconArrowLeft size="large" />, props: { 'aria-label': '上一张' } },
        rightArrow: { children: <IconArrowRight size="large" />, props: { 'aria-label': '下一张' } },
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    return (
        <div>
            <Carousel theme="dark" style={style} autoPlay={false} arrowProps={arrowProps}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Typography.Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{textList[index][1]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{textList[index][2]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </Carousel>
        </div>
    );
}

播放参数

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

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

import type { CSSProperties } from 'react';
import { Carousel, Typography, Space } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const { Title, Paragraph } = Typography;

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <div>
            <Carousel style={style} autoPlay={{ interval: 1500, hoverToPause: true }} theme="dark">
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Title>
                                <Space vertical align="start">
                                    <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                    <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </Carousel>
        </div>
    );
}

动画效果与切换速度

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

import type { CSSProperties } from 'react';
import { Carousel, Typography, Space } from '@fibrous/semi-ui-react';

export default function CarouselDemo() {
    const { Title, Paragraph } = Typography;

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const imgList = ['/assets/carousel/bg-1.png', '/assets/carousel/bg-2.png', '/assets/carousel/bg-3.png'];

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

    return (
        <div>
            <Carousel style={style} speed={1000} animation="fade" theme="dark" autoPlay={false}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Title>
                                <Space vertical align="start">
                                    <Paragraph style={colorStyle}>{textList[index][1]}</Paragraph>
                                    <Paragraph style={colorStyle}>{textList[index][2]}</Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </Carousel>
        </div>
    );
}

受控的轮播图

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

import { useState, type CSSProperties } from 'react';
import { Carousel, Space, Typography } from '@fibrous/semi-ui-react';

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

    const renderLogo = () => {
        return <img src="/assets/placeholder/logo.svg" alt="semi_logo" style={{ width: 87, height: 31 }} />;
    };

    const onChange = (newActiveIndex: number) => {
        setActiveIndex(newActiveIndex);
    };

    const style = {
        width: '100%',
        height: '400px',
    };

    const titleStyle: CSSProperties = {
        position: 'absolute',
        top: '100px',
        left: '100px',
    };

    const colorStyle = {
        color: '#1C1F23',
    };

    return (
        <div>
            <Carousel style={style} activeIndex={activeIndex} autoPlay={false} theme="dark" onChange={onChange}>
                {imgList.map((src, index) => {
                    return (
                        <div key={index} style={{ backgroundSize: 'cover', backgroundImage: `url('${src}')` }}>
                            <Space vertical align="start" spacing="medium" style={titleStyle}>
                                {renderLogo()}
                                <Typography.Title heading={2} style={colorStyle}>
                                    {textList[index][0]}
                                </Typography.Title>
                                <Space vertical align="start">
                                    <Typography.Paragraph style={colorStyle}>{textList[index][1]}</Typography.Paragraph>
                                    <Typography.Paragraph style={colorStyle}>{textList[index][2]}</Typography.Paragraph>
                                </Space>
                            </Space>
                        </div>
                    );
                })}
            </Carousel>
        </div>
    );
}

API 参考

Props

属性	说明	类型	默认值
activeIndex	当前展示的索引，传入即为受控；传 `undefined` 时交还内部状态，从最后一次的索引继续。	`number`	-
animation	切换动画，可选 `slide` 或 `fade`。	`'slide' \| 'fade'`	`"slide"`
aria-label	轮播区域的名称，有名称时才是地标。	`string`	-
arrowProps	上一项、下一项箭头按钮的数据：`leftArrow`、`rightArrow` 的 `children` 为箭头内容，`props` 为按钮的原生属性（如 `aria-label`、`style`、`onClick`）。`props` 展开在内置属性之后，同名的 `onClick`、`className` 会覆盖内置处理与内置类名。	`ArrowProps`	-
arrowType	箭头展示时机，可选 `always` 或 `hover`。	`'always' \| 'hover'`	`"always"`
autoPlay	是否自动循环播放，也可传入 `{ interval, hoverToPause }`：`interval` 为切换间隔（毫秒，默认 2000），`hoverToPause` 为悬浮时是否暂停（默认 true）。	`CarouselAutoPlay`	`true`
children	幻灯片，每个直接子元素是一张，文本等非元素子节点不计入。幻灯片需要把 `id`、`role`、`inert`、`style`、`className` 等属性落到 DOM 上，通常是 DOM 元素或能转发这些属性的组件。	`Type`	`[]`
className	根元素的类名，与内置类名合并。	`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"`
onChange	切换到新的一项时触发，参数为新索引和上一个索引。	`Type`	-
ref	指向组件句柄而非 DOM 元素，可调用下方 Methods 中的方法。	`Type`	-
showArrow	是否展示箭头。	`boolean`	`true`
showIndicator	是否展示指示器。	`boolean`	`true`
slideDirection	动画为 `slide` 时的滑动方向，可选 `left` 或 `right`。	`'left' \| 'right'`	`"left"`
speed	切换速度，单位为毫秒。	`number`	`300`
style	根元素的内联样式。	`React.CSSProperties`	-
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`

其他原生属性（如 aria-labelledby、data-*）落在根元素（role="region"）上。

ArrowButton

属性	说明	类型	默认值
props	箭头 button 上的可传参数，包括style, onClick事件等	React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>	-
children	箭头自定义Icon	React.ReactNode	-

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