使用Swiper輪播引起的探索
阿新 • • 發佈:2018-10-31
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輪播引起的探索