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,//某些情况下需要隐藏前进后退按钮时，可以设定一个自定义的类名。
		}

如有不足请多多指教