Carousel - Svelte - Semi Design Next

Demos

How to import

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

Basic Carousel

Basic carousel

In Svelte the slides are rendered from items data and a slide snippet; the children form is not accepted. Write {#snippet slide({ item, index })}...{/snippet} inside the Carousel tag, one slide per item; the carousel wraps each slide in an element carrying the role and inert.

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

Code

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

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

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

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

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

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

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

Custom Arrow

Customize the attributes of the arrow buttons (aria-label, style, onclick and so on) through leftArrow.props and rightArrow.props of arrowProps; your onclick runs before the built-in handler and your class is merged with the built-in classes. Use the leftArrow and rightArrow snippets for the icons; an empty snippet leaves the button empty.

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

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

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

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

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

Controlled Carousel

Bind the current index with bind:activeIndex; onChange(activeIndex, preIndex) additionally gives the new index and the previous one. Call play, stop, goTo, prev and next through bind:this.

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

<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 reference

Props

Property	Description	Type	Default
activeIndex	Index of the slide being shown; bind it with `bind:activeIndex`. Passing undefined hands control back, continuing from the last controlled index.	`number`	-
animation	Transition animation: slide or fade.	`'slide' \| 'fade'`	`"slide"`
arrowProps	Data for the previous and next arrow buttons: `leftArrow.props` and `rightArrow.props` hold the button attributes. `onclick` and `class` are merged with the built-in handler and classes. Use the `leftArrow` and `rightArrow` snippets for the icons.	`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`
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.	`'dot' \| 'line' \| 'columnar'`	`"dot"`
items	Data for the slides, one per item, rendered by the `slide` snippet; the count is known before the first render.	`readonly T[]`	-
leftArrow	Snippet for the icon of the previous arrow. An empty snippet leaves the button empty.	`Snippet`	-
onChange	Called when the shown slide changes, with the new index and the previous index.	`Type`	-
onfocusin	Called when focus enters the carousel; autoplay pauses as well.	`Type`	-
onfocusout	Called when focus leaves the carousel; autoplay resumes as well.	`Type`	-
onmouseenter	Called when the pointer enters the carousel; with `hoverToPause` autoplay pauses as well.	`Type`	-
onmouseleave	Called when the pointer leaves the carousel; autoplay resumes as well.	`Type`	-
rightArrow	Snippet for the icon of the next arrow. An empty snippet leaves the button empty.	`Snippet`	-
showArrow	Whether to show the arrows.	`boolean`	`true`
showIndicator	Whether to show the indicator.	`boolean`	`true`
slide	Snippet for the content of one slide, with the parameter `{ item, index }`; the carousel wraps each slide in an element carrying the classes, role and `inert`.	`Type`	-
slideDirection	Slide direction when the animation is slide: left or right.	`'left' \| 'right'`	`"left"`
speed	Transition duration in milliseconds.	`number`	`300`
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 off.	`Type`
prev	Goes to the previous slide.	`Type`
stop	Stops autoplay.	`Type`

class, style and native attributes, including aria-label and aria-labelledby, land on the root element (role="region").

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