vue中swiper vue-awesome-swiper实现轮播；鼠标移入暂停 移除播放；点击暂停按钮暂

因为swiper和vue-awesome-swiper的版本较多，如果使用最新的版本，或者两者版本差距较大，就容易掉进很多的坑里面，各种报错。切记，版本一致，建议使用@3.X版本。

首先，安装swiper和vue-awesome-swiper

npm install swiper@3 vue-awesome-swiper@3 --save

然后，按需引入项目文件

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

最后，在定义对于轮播属性方法

<template><!--静态结构--><swiper ref="mySwiper" :options="swiperOption"><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide><swiper-slide class="swiper-slide"><div class="bg_main" @mouseenter="on_bot_enter" @mouseleave="on_bot_leave">123</div></swiper-slide></swiper><div class="playbtn"><div class="swiper-button-prev" slot="button-prev"></div><div class="el-icon-video-play" @click="stop"> </div><div class="swiper-button-next" slot="button-next"></div></div></div></template>

export default {data() {return {//点击播放暂停按钮btnplay: true, //默认播放//swiper轮播swiperOption: {loop: true, //开启循环模式navigation: { //左右切换按钮nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},slidesPerView: 7, //显示个数spaceBetween: 40, //每个模块的间距autoplay: { //自动轮播delay: 3000,stopOnLastSlide: false,disableOnInteraction: false},pagination: { //页数小点el: ".swiper-pagination",clickable: true //允许分页点击跳转},}}},components: {swiper,swiperSlide},computed: {swiper() {return this.$refs.mySwiper.swiper;}},mounted() {this.swiper.slideTo(3, 1000, false);},methods: {stop() { //通过调用鼠标移入移除间接实现暂停播放this.btnplay = !this.btnplay;this.btnplay ? this.on_bot_leave() : this.on_bot_enter();},on_bot_enter() {this.swiper.autoplay.stop();},on_bot_leave() {this.swiper.autoplay.start();},}}

以上代码，直接复制粘贴到相应的模块，直接就能使用，按自己的需求修改swiper相应的属性参数即可。

实现的简单效果如下：

vue中swiper vue-awesome-swiper实现轮播；鼠标移入暂停 移除播放；点击暂停按钮暂停 再点击播放。