轮播图 Carousel - Svelte - Semi Design Next

代码演示

如何引入

<script lang="ts">
    import { Carousel } from '@fibrae/semi-ui-svelte';
</script>

基本用法

Svelte 的幻灯片用 items 数据加 slide snippet 渲染，不接受 children 形式：{#snippet slide({ item, index })}...{/snippet} 写在 Carousel 标签内，每项一张；Carousel 给每张包一层带 role 与 inert 的元素。

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

代码

<script lang="ts">
    import { Carousel, Space, TypographyParagraph, TypographyTitle } from '@fibrae/semi-ui-svelte';

    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 = 'position: absolute; top: 100px; left: 100px; color: #1C1F23';
    const colorStyle = 'color: #1C1F23';
</script>

<Carousel items={slides} style="width: 100%; height: 400px" theme="dark">
    {#snippet slide({ item })}
        <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
            <Space align="start" spacing="medium" style={titleStyle} vertical>
                <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                <Space align="start" vertical>
                    {#each item.lines as line (line)}
                        <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                    {/each}
                </Space>
            </Space>
        </div>
    {/snippet}
</Carousel>

主题切换

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

主题

primary

light

dark

代码

<script lang="ts">
    import { Carousel, Radio, RadioGroup, Space, TypographyParagraph, TypographyTitle, type CarouselProps, type RadioValue } from '@fibrae/semi-ui-svelte';

    let theme = $state<CarouselProps['theme']>('primary');
    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';

    const changeTheme = (value: RadioValue | undefined) => {
        if (value === 'primary' || value === 'light' || value === 'dark') theme = value;
    };
</script>

<div>
    <Carousel autoPlay={false} items={slides} style="width: 100%; height: 400px" {theme}>
        {#snippet slide({ item })}
            <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
                <Space align="start" spacing="medium" style={titleStyle} vertical>
                    <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                    <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                    <Space align="start" vertical>
                        {#each item.lines as line (line)}
                            <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                        {/each}
                    </Space>
                </Space>
            </div>
        {/snippet}
    </Carousel>
    <br />
    <Space>
        <div>主题</div>
        <RadioGroup aria-label="主题" name="demo-carousel-theme" onChange={(e) => changeTheme(e.target.value)} type="button" value={theme}>
            <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前端代码一键转

代码

<script lang="ts">
    import { Carousel, Radio, RadioGroup, Space, TypographyParagraph, TypographyTitle, type CarouselProps, type RadioValue } from '@fibrae/semi-ui-svelte';

    let size = $state<CarouselProps['indicatorSize']>('small');
    let type = $state<CarouselProps['indicatorType']>('dot');
    let position = $state<CarouselProps['indicatorPosition']>('left');
    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';

    const changeType = (value: RadioValue | undefined) => {
        if (value === 'dot' || value === 'line' || value === 'columnar') type = value;
    };
    const changePosition = (value: RadioValue | undefined) => {
        if (value === 'left' || value === 'center' || value === 'right') position = value;
    };
    const changeSize = (value: RadioValue | undefined) => {
        if (value === 'small' || value === 'medium') size = value;
    };
</script>

<div>
    <Carousel autoPlay={false} indicatorPosition={position} indicatorSize={size} indicatorType={type} items={slides} style="width: 100%; height: 400px" theme="dark">
        {#snippet slide({ item })}
            <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
                <Space align="start" spacing="medium" style={titleStyle} vertical>
                    <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                    <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                    <Space align="start" vertical>
                        {#each item.lines as line (line)}
                            <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                        {/each}
                    </Space>
                </Space>
            </div>
        {/snippet}
    </Carousel>
    <br />
    <Space align="start" vertical>
        <Space>
            <div>类型</div>
            <RadioGroup aria-label="指示器类型" name="demo-carousel-indicator-type" onChange={(e) => changeType(e.target.value)} type="button" value={type}>
                <Radio value="dot">dot</Radio>
                <Radio value="line">line</Radio>
                <Radio value="columnar">columnar</Radio>
            </RadioGroup>
        </Space>
        <Space>
            <div>位置</div>
            <RadioGroup aria-label="指示器位置" name="demo-carousel-indicator-position" onChange={(e) => changePosition(e.target.value)} type="button" value={position}>
                <Radio value="left">left</Radio>
                <Radio value="center">center</Radio>
                <Radio value="right">right</Radio>
            </RadioGroup>
        </Space>
        <Space>
            <div>尺寸</div>
            <RadioGroup aria-label="指示器尺寸" name="demo-carousel-indicator-size" onChange={(e) => changeSize(e.target.value)} type="button" value={size}>
                <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

代码

<script lang="ts">
    import { Carousel, Radio, RadioGroup, Space, TypographyParagraph, TypographyTitle, type CarouselProps, type RadioValue } from '@fibrae/semi-ui-svelte';

    let arrowType = $state<CarouselProps['arrowType']>('always');
    let visibility = $state<'show' | 'hide'>('show');
    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';

    const changeVisibility = (value: RadioValue | undefined) => {
        if (value === 'show' || value === 'hide') visibility = value;
    };
    const changeArrowType = (value: RadioValue | undefined) => {
        if (value === 'always' || value === 'hover') arrowType = value;
    };
</script>

<div>
    <Carousel {arrowType} autoPlay={false} items={slides} showArrow={visibility === 'show'} style="width: 100%; height: 400px" theme="dark">
        {#snippet slide({ item })}
            <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
                <Space align="start" spacing="medium" style={titleStyle} vertical>
                    <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                    <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                    <Space align="start" vertical>
                        {#each item.lines as line (line)}
                            <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                        {/each}
                    </Space>
                </Space>
            </div>
        {/snippet}
    </Carousel>
    <br />
    <Space align="start" vertical>
        <Space>
            <div>展示箭头</div>
            <RadioGroup aria-label="展示箭头" name="demo-carousel-visibility" onChange={(e) => changeVisibility(e.target.value)} type="button" value={visibility}>
                <Radio value="show">show</Radio>
                <Radio value="hide">hide</Radio>
            </RadioGroup>
        </Space>
        <Space>
            <div>展示时机</div>
            <RadioGroup aria-label="展示时机" name="demo-carousel-arrow-type" onChange={(e) => changeArrowType(e.target.value)} type="button" value={arrowType}>
                <Radio value="always">always</Radio>
                <Radio value="hover">hover</Radio>
            </RadioGroup>
        </Space>
    </Space>
</div>

定制箭头

通过 arrowProps 的 leftArrow.props、rightArrow.props 定制箭头按钮的属性（aria-label、style、onclick 等）；使用方的 onclick 先于内置处理执行，class 与内置类名合并。箭头里的图标用 leftArrow、rightArrow snippet，snippet 为空时按钮内容为空。

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

<script lang="ts">
    import { IconArrowLeft, IconArrowRight } from '@fibrae/semi-icons-svelte';
    import { Carousel, Space, TypographyParagraph, TypographyTitle } from '@fibrae/semi-ui-svelte';

    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 arrowProps = {
        leftArrow: { props: { 'aria-label': '上一张' } },
        rightArrow: { props: { 'aria-label': '下一张' } },
    };
    const titleStyle = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';
</script>

<Carousel {arrowProps} autoPlay={false} items={slides} style="width: 100%; height: 400px" theme="dark">
    {#snippet slide({ item })}
        <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
            <Space align="start" spacing="medium" style={titleStyle} vertical>
                <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                <Space align="start" vertical>
                    {#each item.lines as line (line)}
                        <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                    {/each}
                </Space>
            </Space>
        </div>
    {/snippet}
    {#snippet leftArrow()}
        <IconArrowLeft size="large" />
    {/snippet}
    {#snippet rightArrow()}
        <IconArrowRight size="large" />
    {/snippet}
</Carousel>

播放参数

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

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

<script lang="ts">
    import { Carousel, Space, TypographyParagraph, TypographyTitle } from '@fibrae/semi-ui-svelte';

    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';
</script>

<Carousel autoPlay={{ interval: 1500, hoverToPause: true }} items={slides} style="width: 100%; height: 400px" theme="dark">
    {#snippet slide({ item })}
        <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
            <Space align="start" spacing="medium" style={titleStyle} vertical>
                <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                <Space align="start" vertical>
                    {#each item.lines as line (line)}
                        <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                    {/each}
                </Space>
            </Space>
        </div>
    {/snippet}
</Carousel>

动画效果与切换速度

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

<script lang="ts">
    import { Carousel, Space, TypographyParagraph, TypographyTitle } from '@fibrae/semi-ui-svelte';

    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';
</script>

<Carousel animation="fade" autoPlay={false} items={slides} speed={1000} style="width: 100%; height: 400px" theme="dark">
    {#snippet slide({ item })}
        <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
            <Space align="start" spacing="medium" style={titleStyle} vertical>
                <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                <Space align="start" vertical>
                    {#each item.lines as line (line)}
                        <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                    {/each}
                </Space>
            </Space>
        </div>
    {/snippet}
</Carousel>

受控的轮播图

用 bind:activeIndex 绑定当前索引；onChange(activeIndex, preIndex) 另外给出新索引和上一个索引。play、stop、goTo、prev、next 经 bind:this 调用。

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

<script lang="ts">
    import { Carousel, Space, TypographyParagraph, TypographyTitle } from '@fibrae/semi-ui-svelte';

    let activeIndex = $state(0);
    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 = 'position: absolute; top: 100px; left: 100px';
    const colorStyle = 'color: #1C1F23';
</script>

<Carousel autoPlay={false} bind:activeIndex items={slides} style="width: 100%; height: 400px" theme="dark">
    {#snippet slide({ item })}
        <div style="height: 100%; background-size: cover; background-image: url('{item.src}')">
            <Space align="start" spacing="medium" style={titleStyle} vertical>
                <img alt="semi_logo" src={logo} style="width: 87px; height: 31px" />
                <TypographyTitle heading={2} style={colorStyle}>{item.title}</TypographyTitle>
                <Space align="start" vertical>
                    {#each item.lines as line (line)}
                        <TypographyParagraph style={colorStyle}>{line}</TypographyParagraph>
                    {/each}
                </Space>
            </Space>
        </div>
    {/snippet}
</Carousel>

API 参考

Props

属性	说明	类型	默认值
activeIndex	当前展示的索引，可用 `bind:activeIndex` 绑定；传 undefined 时交还控制权，从最后一次受控的索引继续。	`number`	-
animation	切换动画，可选 slide 或 fade。	`'slide' \| 'fade'`	`"slide"`
arrowProps	上一项、下一项箭头按钮的数据，`leftArrow.props`、`rightArrow.props` 放按钮属性；`onclick` 与 `class` 会和内置处理、内置类名合并。图标使用 `leftArrow`、`rightArrow` snippet。	`ArrowProps`	-
arrowType	箭头展示时机，可选 always 或 hover。	`'always' \| 'hover'`	`"always"`
autoPlay	是否自动循环播放，也可传入 interval（切换间隔，默认 2000 毫秒）和 hoverToPause（悬浮时是否暂停，默认 true）。	`CarouselAutoPlay`	`true`
indicatorPosition	指示器位置，可选 left、center 或 right。	`'left' \| 'center' \| 'right'`	`"center"`
indicatorSize	指示器尺寸，可选 small 或 medium。	`'small' \| 'medium'`	`"small"`
indicatorType	指示器类型，可选 dot、line 或 columnar。	`'dot' \| 'line' \| 'columnar'`	`"dot"`
items	幻灯片的数据，每项一张，由 `slide` snippet 渲染；数据量决定幻灯片数，首次渲染前就已知。	`readonly T[]`	-
leftArrow	上一项箭头图标的 snippet；传入空 snippet 时按钮内容为空。	`Snippet`	-
onChange	切换到新的一项时调用，参数为新索引和上一个索引。	`Type`	-
onfocusin	焦点进入轮播时调用；同时暂停自动播放。	`Type`	-
onfocusout	焦点离开轮播时调用；同时恢复自动播放。	`Type`	-
onmouseenter	指针进入轮播时调用；`hoverToPause` 为 true 时同时暂停自动播放。	`Type`	-
onmouseleave	指针离开轮播时调用；同时恢复自动播放。	`Type`	-
rightArrow	下一项箭头图标的 snippet；传入空 snippet 时按钮内容为空。	`Snippet`	-
showArrow	是否展示箭头。	`boolean`	`true`
showIndicator	是否展示指示器。	`boolean`	`true`
slide	一张幻灯片内容的 snippet，参数为 `{ item, index }`；Carousel 给每张包一层带样式类、role 与 `inert` 的元素。	`Type`	-
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	停止自动播放。	`Type`

class、style 与原生属性（包括 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