使用Swiper轮播插件引发的探索

 

　　提到Swiper轮播插件，小伙伴们应该不会感到陌生。之前我主要在移动端上使用，PC端使用较少。

　　注：这里须要注意的是，在PC端和移动端使用Swiper是不一样的

 

　　官方给的版本有三个，分别是Swiper2，Swiper3，Swiper4

　　Swiper2官网：https://2.swiper.com.cn/

 

　　Swiper3官网：https://3.swiper.com.cn/

 

　　Swiper4官网：https://www.swiper.com.cn/

　　

　　注：若是在PC端使用，推荐使用Swiper2；移动端使用 Swiper3 或 Swiper4 ；官方解释以下图：

　　

　　　

　　那么问题来了，三个版本之间到底有什么区别呢？如下是官方截图：

 

　　

 

 

 

　　

　　

 

　　在使用过程中，PC端和移动端分别遇到了一个问题

 

　　移动端问题：设置自动轮播属性后没有效果？（已确认引入css，js文件路径和版本正确）

　　解：由于我引入的css，js文件是Swiper4版本, 但我用的倒是 Swiper3版本的设置方法

　　　　Swiper3设置自动播放：autoplay: 3000

　　　　Swiper4设置自动播放：autoplay: { delay: 3000 }，（也能够这样设置autoplay:  true 设置后默认3秒自动切换，）

 

　　Swiper4将组件的相关选项整合起来了，而且修改了回调函数获取swiper实例的方式为this关键词

　　下图是官方给l的 Swiper3 API 和 Swiper4 API 不一样的地方

　　

 

 　　 PC端遇到的问题：想要鼠标移入轮播图后暂停播放，鼠标移出轮播图后恢复播放

 

　　解：Swiper自己没有封装鼠标移入移出事件，须要自行添加，而后调用相关API（mySwiper.autoplay.stop(); 和 mySwiper.autoplay.start();）

　　

　　

　            var mySwiper = new Swiper('.swiper-container',{ 　　　　　　　　　　　autoplay : true, 　　　　　　　　 }) 　　　　　　　　　　 　　　　　　 　　$('.swiper-slide').mouseover(function() { mySwiper.autoplay.stop(); // 暂停播放
 }) $('.swiper-slide').mouseout(function() { mySwiper.autoplay.start(); // 开始播放
　　　　　　　　 })