1. 程式人生 > >使用Swiper輪播引起的探索

使用Swiper輪播引起的探索

del alt 回調函數 沒有 contain color span per 如果

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

  

  

  

使用Swiper輪播引起的探索