Fes Design

Carousel 走马灯 ​

旋转木马，一组轮播的区域。

组件注册 ​

js
import { FCarousel } from '@fesjs/fes-design';

app.use(FCarousel);

代码演示 ​

基础用法 ​

默认展示

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="240px" @change="onChange">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/f615608955b707cd.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<script setup>
const onChange = (current) => {
    console.log('[carousel.default] [onChange] current:', current);
};
</script>

<style scope>
.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

参数控制 ​

常用参数控制。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FForm labelWidth="100px">
            <FFormItem label="箭头:">
                <FRadioGroup
                    v-model="showArrow"
                    :options="[
                        { label: 'always', value: 'always' },
                        { label: 'hover(默认)', value: 'hover' },
                        { label: 'never', value: 'never' },
                    ]"
                />
            </FFormItem>
            <FFormItem label="指示器类型:">
                <FRadioGroup
                    v-model="indicatorType"
                    :options="[
                        { label: 'linear(默认)', value: 'linear' },
                        { label: 'dot', value: 'dot' },
                    ]"
                />
            </FFormItem>
            <FFormItem label="指示器方向:">
                <FRadioGroup
                    v-model="indicatorPlacement"
                    :options="[
                        { label: 'top', value: 'top' },
                        { label: 'bottom(默认)', value: 'bottom' },
                        { label: 'left', value: 'left' },
                        { label: 'right', value: 'right' },
                    ]"
                />
            </FFormItem>
            <FFormItem label="指示器位置:">
                <FRadioGroup
                    v-model="indicatorPosition"
                    :options="[
                        { label: '默认', value: '' },
                        { label: 'outside', value: 'outside' },
                        { label: 'none', value: 'none' },
                    ]"
                />
            </FFormItem>
            <FFormItem label="自动切换间隔:">
                <FInputNumber
                    v-model="interval"
                    style="width: 200px"
                    placeholder="间隔时间，单位为毫秒"
                />
            </FFormItem>
            <FFormItem label="是否自动播放:">
                <FRadioGroup
                    v-model="autoPlay"
                    :options="[
                        { label: '是(默认)', value: true },
                        { label: '否', value: false },
                    ]"
                />
            </FFormItem>
            <FFormItem label="是否循环播放:">
                <FRadioGroup
                    v-model="isLoop"
                    :options="[
                        { label: '是(默认)', value: true },
                        { label: '否', value: false },
                    ]"
                />
            </FFormItem>
            <FFormItem label="悬浮暂停播放:">
                <FRadioGroup
                    v-model="isHoverPause"
                    :options="[
                        { label: '是(默认)', value: true },
                        { label: '否', value: false },
                    ]"
                />
            </FFormItem>
        </FForm>

        <FDivider />

        <FCarousel
            height="240px"
            :loop="isLoop"
            :show-arrow="showArrow"
            :autoplay="autoPlay"
            :interval="interval"
            :indicator-type="indicatorType"
            :indicator-placement="indicatorPlacement"
            :indicator-position="indicatorPosition"
            :pause-on-hover="isHoverPause"
            @change="onChange"
        >
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/f615608955b707cd.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';

const showArrow = ref('hover');
const indicatorType = ref('linear');
const indicatorPlacement = ref('bottom');
const indicatorPosition = ref('');
const interval = ref(3000);
const autoPlay = ref(true);
const isLoop = ref(true);
const isHoverPause = ref(true);

const onChange = (current) => {
    console.log('[carousel.default] [onChange] current:', current);
};
</script>

<style scope>
.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

鼠标经过指示点切换轮播图 ​

设定 trigger 为 hover 鼠标经过指示点时触发切换。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="240px" trigger="hover">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/0ebca23ad388fe61.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<style scope>
.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

指示器类型和显示区域 ​

可以设置指示器类型和显示区域，以及摆放方位，比如圆点、或者放置在轮播图区域外部 or 隐藏。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="240px" indicator-type="dot">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/4dc6f0d9e8e99c9d.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/55f807e9509d8b74.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/92cc394c33b8c0b4.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
    <FSpace vertical class="carousel-demo demo-gap">
        <FCarousel height="240px" indicator-position="outside">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/0ebca23ad388fe61.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<style scope>
.carousel-demo.demo-gap {
    margin-top: 50px;
}

.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

指示器位置 ​

更改指示器位置，分别有 top/right/bottom/left 4 个方向。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="240px" indicator-placement="right">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/0ebca23ad388fe61.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<style scope>
.carousel-demo.demo-gap {
    margin-top: 50px;
}

.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

显示切换箭头 ​

可以设置切换箭头的显示时机 arrow 属性定义了切换箭头的显示时机。 默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示。 若将 arrow 设置为 always，则会一直显示；设置为 never，则会一直隐藏。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="240px" show-arrow="always">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/0ebca23ad388fe61.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<style scope>
.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>

卡片 ​

当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格 将 type 属性设置为 card 即可启用卡片模式。 从交互上来说，卡片模式和一般模式的最大区别在于，卡片模式可以通过直接点击两侧的幻灯片进行切换。

play
<template>
    <FSpace vertical class="carousel-demo">
        <FCarousel height="200px" type="card">
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/0ebca23ad388fe61.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/5c8bf7eb1ef7a400.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/ebaa3c3133c9e964.png"
                >
            </FCarouselItem>
            <FCarouselItem>
                <img
                    src="https://s3.bmp.ovh/imgs/2022/01/2f68ed8e26dc519b.png"
                >
            </FCarouselItem>
        </FCarousel>
    </FSpace>
</template>

<style scope>
.carousel-demo .fes-carousel .fes-carousel-item img {
    width: 100%;
    height: 100%;
}
</style>
属性说明类型可选值默认值
heightcarousel 的高度string——
initial-index初始状态激活的幻灯片的索引，从 0 开始number—0
trigger指示器的触发方式stringclick/hoverclick
autoplay是否自动切换boolean—true
interval自动切换的时间间隔，单位为毫秒number—3000
indicator-type指示器的类型（线性/圆点）stringlinear/dotlinear
indicator-placement指示器的摆放方向stringtop/right/bottom/leftbottom
indicator-position指示器的位置stringoutside/none—
show-arrow切换箭头的显示时机stringalways/hover/neverhover
typecarousel 的类型stringcard—
loop是否循环显示boolean-true
pause-on-hover鼠标悬浮时暂停自动切换boolean-true
事件名说明回调参数
change幻灯片切换时触发目前激活的幻灯片的索引，原幻灯片的索引
方法名说明参数
setActiveItem手动切换幻灯片需要切换的幻灯片的索引，从 0 开始
prev切换至上一张幻灯片—
next切换至下一张幻灯片—
插槽名说明子标签
default默认插槽FCarouselItem
插槽名说明
default自定义标签内容