vue2-swiper

Installation

yarn install vue2-swiper

import SwiperBox from 'vue2-swiper'
Vue.use(SwiperBox);

Usage

    <swiper-box ref="swiper" class="carousel-box" tag="banner" :options="options1">
        <swiper-item v-for="(item, index) in dataList" :key="index" class="carousel-item">
            <img :src="item.src" :alt="item.title">
        </swiper-item>
        <template #pagination></template>
        <template #navigation></template>
    </swiper-box>

Props

| Property | Type | Default Value | Description | |-----------|----------|----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------| | tag | String | | 类名 | | options | Object | {onlyOneStopLoop: true, onlyOneHideControl: false} | swiper5.4.5的option之外增加了onlyOneStopLoop：只有一个元素时是否停止自动轮播;onlyOneHideControl: 只有一个元素时是否隐藏分页器及前进后退按钮,只针对内部操作按钮有用，外部的需要自定义逻辑 |

需要获取swiper对象可以使用this.$refs.swiper.mySwiper 获取到