Carousel - Semi Design Next

Demos

How to import

<script setup lang="ts">
    import { Carousel } from '@fibrous/semi-ui-vue';
</script>

Basic Carousel

Basic carousel

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

Code

<script setup lang="ts">
    import { Carousel, Space, Typography } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    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' } as const;
    const colorStyle = { color: '#1C1F23' };
</script>

<template>
    <Carousel :style="{ width: '100%', height: '400px' }" theme="dark">
        <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
            <Space align="start" spacing="medium" :style="titleStyle" vertical>
                <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                <Space align="start" vertical>
                    <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                </Space>
            </Space>
        </div>
    </Carousel>
</template>

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 setup lang="ts">
    import { ref } from 'vue';
    import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps, type RadioValue } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    const theme = ref<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' } as const;
    const colorStyle = { color: '#1C1F23' };

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

<template>
    <div>
        <Carousel :autoPlay="false" :style="{ width: '100%', height: '400px' }" :theme="theme">
            <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
                <Space align="start" spacing="medium" :style="titleStyle" vertical>
                    <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                    <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                    <Space align="start" vertical>
                        <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                    </Space>
                </Space>
            </div>
        </Carousel>
        <br />
        <Space>
            <div>主题</div>
            <RadioGroup :modelValue="theme" type="button" @update:modelValue="changeTheme">
                <Radio value="primary">primary</Radio>
                <Radio value="light">light</Radio>
                <Radio value="dark">dark</Radio>
            </RadioGroup>
        </Space>
    </div>
</template>

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 setup lang="ts">
    import { ref } from 'vue';
    import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps, type RadioValue } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    const size = ref<CarouselProps['indicatorSize']>('small');
    const type = ref<CarouselProps['indicatorType']>('dot');
    const position = ref<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' } as const;
    const colorStyle = { color: '#1C1F23' };

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

<template>
    <div>
        <Carousel :autoPlay="false" :indicatorPosition="position" :indicatorSize="size" :indicatorType="type" :style="{ width: '100%', height: '400px' }" theme="dark">
            <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
                <Space align="start" spacing="medium" :style="titleStyle" vertical>
                    <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                    <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                    <Space align="start" vertical>
                        <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                    </Space>
                </Space>
            </div>
        </Carousel>
        <br />
        <Space align="start" vertical>
            <Space>
                <div>类型</div>
                <RadioGroup :modelValue="type" type="button" @update:modelValue="changeType">
                    <Radio value="dot">dot</Radio>
                    <Radio value="line">line</Radio>
                    <Radio value="columnar">columnar</Radio>
                </RadioGroup>
            </Space>
            <Space>
                <div>位置</div>
                <RadioGroup :modelValue="position" type="button" @update:modelValue="changePosition">
                    <Radio value="left">left</Radio>
                    <Radio value="center">center</Radio>
                    <Radio value="right">right</Radio>
                </RadioGroup>
            </Space>
            <Space>
                <div>尺寸</div>
                <RadioGroup :modelValue="size" type="button" @update:modelValue="changeSize">
                    <Radio value="small">small</Radio>
                    <Radio value="medium">medium</Radio>
                </RadioGroup>
            </Space>
        </Space>
    </div>
</template>

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 setup lang="ts">
    import { ref } from 'vue';
    import { Carousel, Radio, RadioGroup, Space, Typography, type CarouselProps, type RadioValue } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    const arrowType = ref<CarouselProps['arrowType']>('always');
    const visibility = ref<'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' } as const;
    const colorStyle = { color: '#1C1F23' };

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

<template>
    <div>
        <Carousel :arrowType="arrowType" :autoPlay="false" :showArrow="visibility === 'show'" :style="{ width: '100%', height: '400px' }" theme="dark">
            <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
                <Space align="start" spacing="medium" :style="titleStyle" vertical>
                    <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                    <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                    <Space align="start" vertical>
                        <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                    </Space>
                </Space>
            </div>
        </Carousel>
        <br />
        <Space align="start" vertical>
            <Space>
                <div>展示箭头</div>
                <RadioGroup :modelValue="visibility" type="button" @update:modelValue="changeVisibility">
                    <Radio value="show">show</Radio>
                    <Radio value="hide">hide</Radio>
                </RadioGroup>
            </Space>
            <Space>
                <div>展示时机</div>
                <RadioGroup :modelValue="arrowType" type="button" @update:modelValue="changeArrowType">
                    <Radio value="always">always</Radio>
                    <Radio value="hover">hover</Radio>
                </RadioGroup>
            </Space>
        </Space>
    </div>
</template>

Custom Arrow

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

<script setup lang="ts">
    import { IconArrowLeft, IconArrowRight } from '@fibrous/semi-icons-vue';
    import { Carousel, Space, Typography } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    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' } as const;
    const colorStyle = { color: '#1C1F23' };
</script>

<template>
    <Carousel :arrowProps="arrowProps" :autoPlay="false" :style="{ width: '100%', height: '400px' }" theme="dark">
        <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
            <Space align="start" spacing="medium" :style="titleStyle" vertical>
                <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                <Space align="start" vertical>
                    <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                </Space>
            </Space>
        </div>
        <template #leftArrow>
            <IconArrowLeft size="large" />
        </template>
        <template #rightArrow>
            <IconArrowRight size="large" />
        </template>
    </Carousel>
</template>

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 setup lang="ts">
    import { Carousel, Space, Typography } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    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' } as const;
    const colorStyle = { color: '#1C1F23' };
</script>

<template>
    <Carousel :autoPlay="{ interval: 1500, hoverToPause: true }" :style="{ width: '100%', height: '400px' }" theme="dark">
        <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
            <Space align="start" spacing="medium" :style="titleStyle" vertical>
                <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                <Space align="start" vertical>
                    <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                </Space>
            </Space>
        </div>
    </Carousel>
</template>

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 setup lang="ts">
    import { Carousel, Space, Typography } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    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' } as const;
    const colorStyle = { color: '#1C1F23' };
</script>

<template>
    <Carousel animation="fade" :autoPlay="false" :speed="1000" :style="{ width: '100%', height: '400px' }" theme="dark">
        <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
            <Space align="start" spacing="medium" :style="titleStyle" vertical>
                <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                <Space align="start" vertical>
                    <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                </Space>
            </Space>
        </div>
    </Carousel>
</template>

Controlled Carousel

Bind the current index with v-model:activeIndex; @change additionally gives the new index and the previous one.

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

Code

<script setup lang="ts">
    import { ref } from 'vue';
    import { Carousel, Space, Typography } from '@fibrous/semi-ui-vue';

    const { Title, Paragraph } = Typography;

    const activeIndex = ref(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' } as const;
    const colorStyle = { color: '#1C1F23' };
</script>

<template>
    <Carousel v-model:activeIndex="activeIndex" :autoPlay="false" :style="{ width: '100%', height: '400px' }" theme="dark">
        <div v-for="slide in slides" :key="slide.src" :style="{ backgroundSize: 'cover', backgroundImage: `url('${slide.src}')` }">
            <Space align="start" spacing="medium" :style="titleStyle" vertical>
                <img alt="semi_logo" :src="logo" :style="{ width: '87px', height: '31px' }" />
                <Title :heading="2" :style="colorStyle">{{ slide.title }}</Title>
                <Space align="start" vertical>
                    <Paragraph v-for="line in slide.lines" :key="line" :style="colorStyle">{{ line }}</Paragraph>
                </Space>
            </Space>
        </div>
    </Carousel>
</template>

API reference

Props

Property	Description	Type	Default
activeIndex	Index of the slide being shown, used with v-model:activeIndex. Passing undefined hands control back, continuing from the last controlled index.	`number`	`semiGlobalDefault("Carousel", "activeIndex")`
animation	Transition animation: slide or fade.	`"fade" \| "slide"`	`semiDefault("Carousel", "animation", "slide")`
arrowProps	Data for the previous and next arrow buttons: attributes only. onClick and class are merged with the built-in handler and classes. Use the leftArrow and rightArrow slots for the icons.	`ArrowProps`	`semiGlobalDefault("Carousel", "arrowProps")`
arrowType	When the arrows are shown: always or hover.	`"always" \| "hover"`	`semiDefault("Carousel", "arrowType", "always")`
autoPlay	Whether to play automatically, or an object with interval (milliseconds between slides, default 2000) and hoverToPause (pause while hovered, default true).	`CarouselAutoPlay`	`semiDefault("Carousel", "autoPlay", true)`
defaultActiveIndex	Index of the slide shown initially, used when uncontrolled.	`number`	`Type`
indicatorPosition	Indicator position: left, center or right.	`"left" \| "right" \| "center"`	`semiDefault("Carousel", "indicatorPosition", "center")`
indicatorSize	Indicator size: small or medium.	`"small" \| "medium"`	`semiDefault("Carousel", "indicatorSize", "small")`
indicatorType	Indicator type: dot, line or columnar.	`"dot" \| "line" \| "columnar"`	`semiDefault("Carousel", "indicatorType", "dot")`
showArrow	Whether to show the arrows.	`boolean`	`semiDefault("Carousel", "showArrow", true)`
showIndicator	Whether to show the indicator.	`boolean`	`semiDefault("Carousel", "showIndicator", true)`
slideDirection	Slide direction when the animation is slide: left or right.	`"left" \| "right"`	`semiDefault("Carousel", "slideDirection", "left")`
speed	Transition duration in milliseconds.	`number`	`semiDefault("Carousel", "speed", numbers.DEFAULT_SPEED)`
theme	Theme of the indicator and arrows: primary, light or dark.	`"dark" \| "primary" \| "light"`	`semiDefault("Carousel", "theme", "light")`
trigger	How the indicator switches slides: click or hover.	`"hover" \| "click"`	`semiDefault("Carousel", "trigger", "click")`

Events

Event	Description	Callback parameters
update:activeIndex	Emitted when the shown slide changes, backing v-model:activeIndex.	`[index: number]`
change	Emitted when the shown slide changes, with the new index and the previous index.	`[index: number, preIndex: number]`

Slots

Slot	Description	Scope parameters
default	The slides, one per direct child. A slide must pass id, role, inert, class and style down to its DOM.	`any`
leftArrow	Content of the previous arrow button. An empty slot leaves the button empty.	`any`
rightArrow	Content of the next arrow button. An empty slot leaves the button empty.	`any`

Exposes

Name	Description	Type
next	Goes to the next slide.	`Type`
prev	Goes to the previous slide.	`Type`
goTo	Goes to the given index; an out-of-range index wraps around.	`Type`
play	Starts autoplay, even when autoPlay is off.	`Type`
stop	Stops autoplay.	`Type`

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

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