Vue2-swiper-z NPM

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: 只有一个元素时是否隐藏分页器及前进后退按钮,只针对内部操作按钮有用，外部的需要自定义逻辑