swiper centeredSlides 自定義各個圖片寬度時的解決辦法

• 這個問題困擾了2天時間，只能說太優秀。

• 爲了幫助各位和我遇到一樣問題的朋友們，我決定吧解決方案寫下來，但願對大家有幫助。

• 個人需求是將中間的那張圖片寬度爲 70vw， 其它圖片的寬度是100px.

• 我首先想到的是slidesPerView設置爲‘auto’，而後，經過設置樣式：

• .swiper-slide-active{width: 70vw !important;}

• .swiper-slide{width: 100px !important;}

• 而後設置它的偏移距離， swiper參數： slidesOffsetBefore： number

• 我雖然設置好了offset偏移距離，但因爲每一個設備分辨率不同，偏移距離老是會有誤差，看了源碼，計算了寬度，然並卵。。。

• 後來，查看官網示例，看到用transform： scale(0.1) 縮放大小。

• 我想了一下，發現這個辦法是可行的， 首先， 個人中間大圖片的寬度時70vw, 也就是

window.innerWidth * 0.7 寬度

假設每張圖片的寬度時slideWidth ; 要將slideWidth 縮放n倍 使它等於 70 vw, 即： 

slideWidth * n = window.innerWidth * 0.7

因而n 這個值就獲得了. 而後改變css的scale值

同理 縮放小圖片的寬度，使他等於100px;即：

slideWidth * m = 100

注： 獲取slideWidth 的獲取：swiper初始化生成的單個slide的寬度

複製代碼

• 而後計算下這些值，在css動態修改下就ok啦。

• 剩下的就是樣式問題了，我就不用再講了。