Carousel - Semi Design Next

Demos

How to import

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

Basic Carousel

Basic carousel

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

Code

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>
    );
}

Theme Switch

Three themes are defined by default: primary、light、dark

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

主题

primary

light

dark

Code

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>
    );
}

Indicators

Indicators can be adjusted for type, position, size
type: dot、line、columnar
position: left、center、right
size: small、medium

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma前端代码一键转

Code

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>
    );
}

Arrows

Control whether the arrow is visible through the showArrow property
If the arrow is visible, use the arrowType property to control the timing of the arrow display

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

展示箭头

show

hide

展示时机

always

hover

Code

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>
    );
}

Custom Arrow

Customize arrow styles and click events through the arrowProps property

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

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>
    );
}

Play Parameters

Pass the parameter interval to autoPlay to control the time interval between two pictures, and pass hoverToPause to control whether to stop playing when the mouse is placed on the picture

A carousel mounted with no more than one slide does not play; when slides are added later and there are more than one, it starts playing according to autoPlay.

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

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 and Speed

Control the animation by giving the animation property, optional values are fade, slide
Control the switching time between two pictures by giving the speed attribute, the unit is ms

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

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>
    );
}

Controlled Carousel

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

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 reference

Props

Property	Description	Type	Default
activeIndex	Index of the slide being shown. Passing it makes the carousel controlled; passing `undefined` hands control back to the internal state, continuing from the last index.	`number`	-
animation	Transition animation: `slide` or `fade`.	`'slide' \| 'fade'`	`"slide"`
aria-label	Name of the carousel region; only a named region is a landmark.	`string`	-
arrowProps	Data for the previous and next arrow buttons: `children` is the arrow content, and `props` holds the native attributes of the button (such as `aria-label`, `style` and `onClick`). `props` is spread after the built-in attributes, so its `onClick` and `className` replace the built-in handler and class names.	`ArrowProps`	-
arrowType	When the arrows are shown: `always` or `hover`.	`'always' \| 'hover'`	`"always"`
autoPlay	Whether to play automatically, or an object with `interval` (milliseconds between slides, default 2000) and `hoverToPause` (pause while hovered, default true).	`CarouselAutoPlay`	`true`
children	The slides, one per direct child element; text and other non-element children are not counted. A slide must put attributes such as `id`, `role`, `inert`, `style` and `className` on the DOM, so it is usually a DOM element or a component that forwards them.	`Type`	`[]`
className	Class name of the root element, merged with the built-in class names.	`string`	-
defaultActiveIndex	Index of the slide shown initially, used when uncontrolled.	`number`	`0`
indicatorPosition	Indicator position: `left`, `center` or `right`.	`'left' \| 'center' \| 'right'`	`"center"`
indicatorSize	Indicator size: `small` or `medium`.	`'small' \| 'medium'`	`"small"`
indicatorType	Indicator type: `dot`, `line` or `columnar`.	`'columnar' \| 'line' \| 'dot'`	`"dot"`
onChange	Called when the shown slide changes, with the new index and the previous index.	`Type`	-
ref	Points to the component handle rather than a DOM element; it exposes the methods listed below.	`Type`	-
showArrow	Whether to show the arrows.	`boolean`	`true`
showIndicator	Whether to show the indicator.	`boolean`	`true`
slideDirection	Slide direction when the animation is `slide`: `left` or `right`.	`'left' \| 'right'`	`"left"`
speed	Transition duration in milliseconds.	`number`	`300`
style	Inline style of the root element.	`React.CSSProperties`	-
theme	Theme of the indicator and arrows: `primary`, `light` or `dark`.	`'dark' \| 'primary' \| 'light'`	`"light"`
trigger	How the indicator switches slides: `click` or `hover`.	`'click' \| 'hover'`	`"click"`

Methods

Method	Description	Type
goTo	Goes to the given index; an out-of-range index wraps around.	`Type`
next	Goes to the next slide.	`Type`
play	Starts autoplay, even when `autoPlay` is `false`.	`Type`
prev	Goes to the previous slide.	`Type`
stop	Stops autoplay; switching manually does not resume it until `play()` is called.	`Type`

Other native attributes, such as aria-labelledby and data-*, land on the root element (role="region").

ArrowButton

PROPERTIES	INSTRUCTIONS	TYPE	DEFAULT
props	Parameters on the arrow button, including style, onClick events, etc	DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>	-
children	Arrow custom icon	React.ReactNode	-

Accessibility

Carousel follows the WAI-ARIA Carousel pattern.

ARIA

The root is role="region" with aria-roledescription "carousel". A region needs a name to become a landmark, so describe what the carousel shows with aria-label or aria-labelledby.
With indicators, each slide is the tabpanel of its indicator (tab), linked by aria-controls and aria-labelledby; an id already on a slide is kept. Without indicators, each slide is role="group" with aria-roledescription "slide" and the name "Slide N".
Slides other than the current one are inert: their content cannot be focused and screen readers skip it. A slide must be an element or a component that puts props such as inert, role and id on its DOM, just like the class name and style.
The slides container is aria-live="off" while rotating and polite otherwise, so a slide the user switches to is announced and an automatic switch is not.
The arrow buttons are named from the locale ("Previous index", "Next index") by default; custom arrow content with readable text (text, or an element with aria-label) names the button instead; a name passed with arrowProps.leftArrow.props['aria-label'] or its right counterpart wins over both.

Keyboard and Focus

Keyboard focus inside the carousel (an arrow, an indicator or focusable content in a slide) pauses autoplay until focus leaves, after which autoplay resumes (the APG advises staying stopped, which this differs from), and switching from the keyboard meanwhile does not restart it. A mouse click on an arrow does not pause.
The previous and next arrows are native button elements: focus them with Tab and activate them with Enter or Space.
The indicators form a tablist in which only the current one is in the Tab sequence. While focus is on an indicator:
- ArrowLeft goes to the previous slide and ArrowRight to the next one, wrapping around at both ends, and focus follows to the new current indicator. In RTL the directions are swapped.
- Home goes to the first slide and End to the last one.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$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