swiper-wrapper輪滑元件(多組輪滑介面)無效問題解決
阿新 • • 發佈:2019-01-02
1. 我覺得最難的就是改外掛啦,看得懂還好,看不懂只能硬啃了,不過過程還是蠻享受的,畢竟對前端弱雞來說是get了一個技能點。
2.首先swiper輪滑元件是有很多詳細的官網api的,其實有些細節問題一旦爆發出來也是在api裡一頓苦找。
那麼言歸正傳,多組輪滑swiper同時出現時,會有一個初始化問題,當你宣告的swiper物件僅為一個時,那麼多組輪滑樣式就開始各種報錯啦
譬如:左右兩邊的滑動根本不受width控制,無限延伸,或是點選分頁圖示無效等。
以一個可loop迴圈的輪滑來舉例var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 1, paginationClickable: true, spaceBetween: 0, loop: true });
在多組此種輪滑效果出現時,你需要加兩個屬性值,即
observer:true,
observeParents:true
屢試不爽啊,一加效果就對了,別忘了清除網頁快取 Ctrl+shift+Delate
3.那麼有人問了,如果是要求輪滑效果中的其中一組的slide高度不同於其他組怎麼辦?其實都是初始化物件的問題,此時需要重新定義一個swiper物件來進行區別,
你可以重新賦值css來達成樣式效果,這個new的新物件程式碼即是:
程式碼中為兩組輪滑,我設定的屬性值是不同的,在物件中改變了物件名之後,別忘了在html程式碼中的container1也要改好啊。var swiper1 = new Swiper('.swiper-container1', { pagination: '.swiper-pagination1', slidesPerView: 1, paginationClickable: true, spaceBetween: 0, loop: true, observer:true, observeParents:true }); var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 2.25, paginationClickable: true, spaceBetween: 18, freeMode: true,//此處新增兩句:在修改Swiper樣式時,自動初始化swiper observer:true, observeParents:true });
4.具體的屬性值及意義可以參考官網api
http://www.swiper.com.cn/api/start/2014/1218/140.html
5.覺得有了幫助了,請點贊請關注吧。
有需要swiper的css和js可以評論後發哦。