vue-awesome-swiper插件的使用

1、安装

npm install vue-awesome-swiper --save-dev

2、在vue中引入

进入maim.js文件

import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
    
Vue.use(vueSwiper)

3、页面调用

<template>
    <swiper :options="swiperOption">
            <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">
                <img :src="item"/>
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>   
             <!-- 左右箭头 --> 
            <div class="swiper-button-prev" slot="button-prev"></div> 
            <div class="swiper-button-next" slot="button-next"></div> 
        </swiper>
</template>

<script>
    export default {
        data(){
            return {
                swiperOption:{
                    //显示分页
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    //设置点击箭头
                    navigation: {
                      nextEl: '.swiper-button-next', 
                      prevEl: '.swiper-button-prev'
                    },
                    //自动轮播
                    autoplay: {
                      delay: 2000,
                      //当用户滑动图片后继续自动轮播
                      disableOnInteraction: false,
                    },
                    //开启循环模式
                    loop: true
                }
            }
        }
    }
</script>