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啦。

• 剩下的就是样式问题了，我就不用再讲了。