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