使用swiper实现不完全覆盖轮播图

1 名字起的这么高大上，究竟是什么效果呢，先来张图片欣赏一下

QQ图片20171019165150.png

---

【这种轮播的方式突出了中间的内容（重点），可以滑动查看其他的内容，广泛用在app上，如美丽说的正在流行的一些东西，一行展示不完，就采用这种滑动的形式】

swiper怎么实现这种效果呢

1 slidesPerView 设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
2 initialSlide: 1, //默认显示第二个的下标
3 centeredSlides: true, //设置活动块居中
4 simulateTouch: false //默认为true，Swiper接受鼠标点击、拖动。

css 很明显，中间处于激活状态的块比较大，可以使用css3 的transform: scale(0.9) 让所有的块都缩放，给当前处于激活状态的块单独设一个样式

transform: scale(1);
-webkit-transition: transform 0.3s ease; 变大变小动画过渡