swiper-vue

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'

Swiper Slot

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