swiper-vue,swiper

description

基于vue3.0的轮播组件,有左右和上下轮播方向。

支持左右点击箭头切换，也可以点击下方指示器切换。

支持鼠标左键点击item项后滑动切换，支持鼠标滚动切换。

具体配置、事件、插槽可看下方详细文档

在vue单组件内部引入

<template>
    <swiper-vue autoplay :delay='2000' arrow='hover' indicator :items="options">
        <template #default="{ item, index,activeIndex,isActive }">
            <div style="height: 100%;width: 100%;background: #99A9BF;display: flex;justify-content: center;align-items: center;">{{ item.name }}</div>
        </template>
    </swiper-vue>
</template>
<script lang='ts' setup>
    import 'swiper-vue/dist/hut-es.css';
    import { SwiperVue } from 'swiper-vue';

    const options = [
        {
            name: 'swiper1'
        },
        {
            name: 'swiper2'
        },
        {
            name: 'swiper3'
        }
    ]
</script>

全局引入

    import { createApp } from 'vue'
    import 'swiper-vue/dist/hut-es.css';
    import SwiperVue from 'swiper-vue';

    const $app = createApp(App);
    $app.use(SwiperVue);
    $app.mount('#app');`

Properties

|property|type|default|description| |:---|:---|:---|:---| |items|Array|数据源|轮播数据源，数组形式| |direction|String|horizontal|当前轮播的方向，默认为horizontal水平，vertical为垂直| |autoplay|Boolean|true|是否自动播放轮播| |delay|Number|2000|自动播放间隔，单位毫秒，默认2秒| |indicator|Boolean|true|是否显示轮播底部指示器| |mouseSlider|Boolean|true|是否开启鼠标点击轮播项左右滑动切换| |triggerMove|Number|null|鼠标点击轮播项左右滑动切换的触发值，默认为滑动该容器1/2.5宽度或者高度切换| |mouseScroll|Boolean|false|是否开启鼠标滚轮切换轮播，默认不开启| |hoverStop|Boolean|true|鼠标悬停时暂停轮播，默认为true| |arrow|String|always|左右切换箭头的显示形式，默认一直显示，值为always、hover、none| |height|Number|200|轮播容器高度| |width|Number|null|轮播容器宽度，默认为容器父元素宽度|

swiper Event

|name|description| |:---|:---| |on-change|轮播切换后触发事件，function(type:'pre'|'next',goIndex: number){}|

Swiper Slot

|name|description| |:---|:---| |default|轮播项内容,item为当前项值，index为当前索引，activeIndex为当前激活项索引，isActive为当前项是否激活| |pre-icon|轮播左切换| |next-icon|轮播右切换|