需求
微信swiper元件使用方法完善
回顧
-
swiper-item 與內部展示的內容的寬度差，形成視覺上的swiper-item間隔，實際上swiper-item包括了空白的部分
視覺上左邊間隔40，右邊間隔50，swiper-item寬度420
實現
- swpier-item寬度 定寬 470
- 注意使用 !important
- item內內容設定左右margin分別為40 10
需求二
展示前後兩張輪播的一部分
要點
- swiper-item 定寬
- swiper privious-margin屬性的使用
- 數學計算
實現
計算兩側留出的寬度：（750 - swiperitemwidth）/2，該值設定給swiper屬性privious-margin
因此明白原理，併合理使用previous-margin next-margin，面對其它的設計佈局也難不倒我們，比如：
- swiper寬度定為420+50，為什麼是加50不是加100？item內margin： 0 auto，根據設計稿計算前後要設定的margin即可
作者簡介：黃傑，蘆葦科技web前端開發工程師 專注於前端領域框架、互動設計、影象繪製、資料分析等研究，訪問 www.talkmoney.cn 瞭解更多。