使用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(); // 開始播放
　　　　　　　　 })