vue swipe 轮播图的使用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/QQ_Empire/article/details/100016243

 1，安装

npm install vue-awesome-swiper --save

2，在vue文件中使用

     1、全局引入

import vueSwiper from 'vue-awesome-swiper'  //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'  //引入样式

Vue.config.productionTip = false

Vue.use(vueSwiper)  //使用插件

     2、单页面使用

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

 export default {
        name: "",
        components: {
            swiper,
            swiperSlide
        },
}

3，标签

  <swiper :options="swiperOption" ref="imgOverview" style="height: 100%;">
        <swiper-slide v-for="(img, index) in list2" :key="index">
            <div class="swiper-zoom-container">
                <img :src="img" alt="">
            </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

4，data里面

      data(){

             swiperOption: {
                    width: window.innerWidth,
                    zoom: true,
                    initialSlide: 0,
                    //显示分页
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true, //允许分页点击跳转
                        type: 'fraction',
                    },
                     prevButton:'.swiper-button-prev',//上一张
                     nextButton:'.swiper-button-next',//下一张
                    //设置点击箭头
                    navigation: {
                        nextEl: '.swiper-button-next', 
                        prevEl: '.swiper-button-prev'
                    },
                   
                    //开启循环模式
                    loop: true,
                    //开启鼠标滚轮控制Swiper切换
                    mousewheel: true,
                },
        }

5，效果图