轮播图 - Semi Design Next

代码演示

如何引入

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

基本用法

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi Template

高效的 Design2Code 设计稿转代码

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

代码

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

主题切换

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

主题

primary

light

dark

代码

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

指示器

指示器可以调节类型、位置、尺寸
类型： dot、line、columnar
位置： left、center、right
尺寸： small、medium

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

海量 Figma前端代码一键转

代码

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

箭头

通过 showArrow 属性控制箭头是否可见
如果箭头可见，通过 arrowType 属性控制箭头展示的时机

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

展示箭头

show

hide

展示时机

always

hover

代码

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

定制箭头

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

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

播放参数

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

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

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

<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 属性控制动画，可选值有 fade，slide
通过给 speed 属性控制两张图片之间的切换时间，单位为ms

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

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

受控的轮播图

用 v-model:activeIndex 绑定当前索引；@change 另外给出新索引和上一个索引。

Semi 设计管理系统

从 Semi Design，到 Any Design

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

Semi 物料市场

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

内容由 Semi Design 用户共建

Semi 设计/代码模板

高效的 Design2Code 设计稿转代码

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

代码

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

Props

属性	说明	类型	默认值
activeIndex	当前展示的索引，配合 v-model:activeIndex 使用；传 undefined 时交还控制权，从最后一次受控的索引继续。	`number`	`semiGlobalDefault("Carousel", "activeIndex")`
animation	切换动画，可选 slide 或 fade。	`"fade" \| "slide"`	`semiDefault("Carousel", "animation", "slide")`
arrowProps	上一项、下一项箭头按钮的数据，只放属性；onClick 与 class 会和内置处理、内置类名合并。图标使用 leftArrow、rightArrow 插槽。	`ArrowProps`	`semiGlobalDefault("Carousel", "arrowProps")`
arrowType	箭头展示时机，可选 always 或 hover。	`"always" \| "hover"`	`semiDefault("Carousel", "arrowType", "always")`
autoPlay	是否自动循环播放，也可传入 interval（切换间隔，默认 2000 毫秒）和 hoverToPause（悬浮时是否暂停，默认 true）。	`CarouselAutoPlay`	`semiDefault("Carousel", "autoPlay", true)`
defaultActiveIndex	初始展示的索引，非受控时使用。	`number`	`Type`
indicatorPosition	指示器位置，可选 left、center 或 right。	`"left" \| "right" \| "center"`	`semiDefault("Carousel", "indicatorPosition", "center")`
indicatorSize	指示器尺寸，可选 small 或 medium。	`"small" \| "medium"`	`semiDefault("Carousel", "indicatorSize", "small")`
indicatorType	指示器类型，可选 dot、line 或 columnar。	`"dot" \| "line" \| "columnar"`	`semiDefault("Carousel", "indicatorType", "dot")`
showArrow	是否展示箭头。	`boolean`	`semiDefault("Carousel", "showArrow", true)`
showIndicator	是否展示指示器。	`boolean`	`semiDefault("Carousel", "showIndicator", true)`
slideDirection	动画为 slide 时的滑动方向，可选 left 或 right。	`"left" \| "right"`	`semiDefault("Carousel", "slideDirection", "left")`
speed	切换速度，单位为毫秒。	`number`	`semiDefault("Carousel", "speed", numbers.DEFAULT_SPEED)`
theme	指示器和箭头的主题，可选 primary、light 或 dark。	`"dark" \| "primary" \| "light"`	`semiDefault("Carousel", "theme", "light")`
trigger	指示器触发切换的时机，可选 click 或 hover。	`"hover" \| "click"`	`semiDefault("Carousel", "trigger", "click")`

Events

事件	说明	回调参数
update:activeIndex	切换到新的一项时触发，用于 v-model:activeIndex。	`[index: number]`
change	切换到新的一项时触发，参数为新索引和上一个索引。	`[index: number, preIndex: number]`

Slots

插槽	说明	作用域参数
default	幻灯片，每个直接子节点是一张。幻灯片需要把 id、role、inert、class、style 等属性落到自己的 DOM 上。	`any`
leftArrow	上一项箭头按钮的内容；传入空插槽时按钮内容为空。	`any`
rightArrow	下一项箭头按钮的内容；传入空插槽时按钮内容为空。	`any`

Exposes

名称	说明	类型
next	切换到下一项。	`Type`
prev	切换到上一项。	`Type`
goTo	切换到指定索引，超出范围时循环。	`Type`
play	开始自动播放，autoPlay 为 false 时同样生效。	`Type`
stop	停止自动播放。	`Type`

class、style 与原生属性经 attrs 落在根元素（role="region"）上，aria-label、aria-labelledby 同样。

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