Swiper 使用

效果一

轮播图 中间大两边小，一次显示三个

方法一

基于示例：官方示例

var swiperMovie = new Swiper ('.swiper-container--movie',{
    slidesPerView: 3, //显示三个，宽度平分
    centeredSlides: true, // active slide 居中设置（默认居左）
    centeredSlidesBounds: true, // 主要是为了让第一个贴边（赠送最后一个贴合边缘）
    loop: true // 循环
}) 

.swiper-container--movie .swiper-slide-active,
.swiper-container--movie .swiper-slide-duplicate-active {
  transform: scale(1.3); //让中间的放大
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  z-index: 2;  //为了让中间的在最上层
}

问题

• 滑动切换时，手指放开才会进行缩放
• 左右两边的图片比例有点固化，因为一开始就是平分效果，放大是在平分的基础上完成的。所以如果要求左右两边的图片大于整体的三分一，效果就非常不好了。

优点

• 基准是左右两边的图，即整体大小的平分
• 实现简单
• 适用于效果要求不高的

方法二

基于示例：官方示例

var swiperMovie = new Swiper ('.swiper-container--movie',{
    slidesPerView: 'auto',
    centeredSlidesBounds: true,
    effect: 'coverflow',
    centeredSlides: true,
    loop: true,
    coverflowEffect: {
        rotate: 0, // 倾斜角度
        stretch: 72, // 重叠的距离
        depth: 400,  // 位置深度（值越大z轴越远，看起来越小）
        modifier: 1, // 倍率（值越大，上面三个参数效果越明显）
        slideShadows: true,  // 左右是否有阴影遮罩
    }
})

.swiper-container--movie .swiper-slide {
    /* width: 200px*/
    width: 58.5%;
}

问题

• 显示的个数不固定，大屏幕和小屏幕显示的个数一样，即使是使用百分比也不能保证显示的效果一样。
• 参数不好调整，为了跟设计稿一个大小，调试了半天。

可以按照先设置中间图片的大小，然后通过设置 depth 改变左右两边图片的高度（先实现高度跟设计稿对齐），最后通过设置 stretch 使左右图片向中间靠拢。modifier 默认设置即可，此处暂时不需要调整。

优点

• 宽度设置基于中间图片的大小，即设置 swiper-slide 宽度时设置的是 active slide 的大小。
• 可以随意按照各种比例设置，高自由度。
• 过度效果都不需要自己写，切换流畅。