vue使用swiper实现轮播，左右箭头可在轮播图里面也可以在轮播图外面

vue封装了一个插件包用来实现轮播效果：vue-awesome-swiper

命令行安装: npm install vue-awesome-swiper --save

在vue中使用swiper可以分为两种：

第一种：全局引入

在main.js中

 import VueAwesomeSwiper from 'vue-awesome-swiper';
 import "swiper/dist/css/swiper.css";

 Vue.use(VueAwesomeSwiper)

第二种：局部引入

在所用模块的js文件中

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

export default {
    
    components: {
        swiper,
        swiperSlide
    }
}

在.vue文件中,左右箭头放在轮播图的外面，代码如下：

 <swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
</swiper>

 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>

在.vue文件中,左右箭头放在轮播图的里面，代码如下：

 <swiper class="swiper" :options="swiperOption" >
      <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
          <div class="swiper-content">{{item}}</div>
      </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>

 

上面swiperOption的配置信息如下，具体请参考官网： 

export default {
    data() {
        return {
            // 轮播图
            swiperOption: {
                slidesPerView: 4, // 每页展示几条数据
                slidesPerGroup: 4, // 每屏滚动几条数据
                autoplay: false, // 是否自动播放
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: ''
                },
                observer: true,
                observeParents: true,
            },

        }
    }
}

如果实现效果出现点击左右箭头失效的情况，请参考这个地址：https://blog.csdn.net/friend_ship/article/details/104920051