vue中使用swiper插件实现自定义切换按钮

安装

安装swiper插件

//npm安装
 npm install swiper vue-awesome-swiper --save

 //yarn安装
 yarn add swiper vue-awesome-swiper

//cnpm安装
npm install swiper vue-awesome-swiper --save

引入

全局引入

在main.js中引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'//引入插件
import 'swiper/dist/css/swiper.css'//引入css样式
Vue.use(VueAwesomeSwiper)//使用

局部引入

在需要的文件引入
在script标签下

import 'swiper/css/swiper.css'
import { Swiper} from 'vue-awesome-swiper'

###使用

  components: {
    Swiper
  },

  data() {
      return {
       swiperOption: {
       //循环  实现无限切换
        loop: true,
        navigation: {
           //下一张
          nextEl: '.btn-right',//下一张标签类名可以自定义
          //上一张
          prevEl: '.btn-left'//上一张标签类名可以自定义
        }
      },
     },
    }

html代码

<swiper :options="swiperOption" class="swiper-wrapper"  ref="mySwiper">
        <swiper-slide><img src="../assets/banner1.jpg" /> </swiper-slide>
        <swiper-slide><img src="../assets/banner2.jpg"/> </swiper-slide>
        <swiper-slide><img  src="../assets/banner3.jpg"/> </swiper-slide>
        <swiper-slide><img src="../assets/banner4.jpg"/> </swiper-slide>       
</swiper>
        <div class="btn-left"></div>//翻页  根据标签名实现翻页可自定义样式位置
        <div class="btn-right"></div>//翻页  根据标签名实现翻页可自定义样式位置
        

其他功能 如有需要自行添加

		watchOverflow:true,//当没有足够的slide切换时，例如只有1个slide（非loop），swiper会失效且隐藏导航。
		grabCursor : true,//设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
		effect : 'slide',//切换效果：默认为“位移切换”。
		loop : true,//让Swiper看起来是循环的。
		autoplay: {//启动自动切换，具体选项如下：
			delay: 3000,//自动切换的时间间隔，单位ms
			stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
			disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
		},
		// 如果需要分页器，类名要和 HTML 中的相对应
		pagination: {
			el: '.swiper-pagination',//自动隐藏
			clickable :true,
		},
		//如果需要前进后退按钮，类名要和 HTML 中的相对应
		navigation: {
			nextEl: '.swiper-button-next',//自动隐藏
			prevEl: '.swiper-button-prev',//自动隐藏
			hiddenClass: 'btn-hidden',//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。
		}