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实现轮播；鼠标移入暂停，移除播放；点击暂停按钮暂停，再点击播放。相关推荐

微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
vue，uniapp带有导航栏的轮播图swiper组件，滑动的同时点击导航栏切换，使异步滑动过程中位置发生改变，不能正常展示的问题解决（这里用uiniapp的swiper组件）
<view v-show="totalListArr.length>1" class="comp-tabs&qu ...
快速入门在Vue中使用滑动插件Swiper
前言 swiper 开源.免费.强大的滑动插件. swiper中文网 https://www.swiper.com.cn/ Swiper4中文API https://www.swiper.com.cn ...
android 层叠轮播,vue手写一个卡片化层叠轮播（支持滑动，移动端连续滚动，点击）...
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 卡片化层叠轮播 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后trans ...
Swiper实现两种常用轮播图
效果图: 市面上实现的网页中的轮播图大多都是用Swiper实现的,主要就是这两种,其实没必要写这篇的,写这篇的目的.....emmm.....方便以后伸手使用和练习两个swiper......别打我. ...
vue手写一个卡片化层叠轮播五张三张
项目需求,需要写一个卡片化层叠的轮播,找了下插件都没有合适的,于是写了一个展示5个卡片的轮播先看效果图: 5个卡片要计算各自的高度,宽度,利用相对定位计算出各自的位置然后transition过渡来 ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...

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

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

最新文章

热门文章