swiper的特定的交互样式

场景： swiper一屏展示三个silde，其中active的滑块需要放大2倍；且再点击swiper左右切换的时候有过度效果

1. 由于需求中的slide大小不同，若是开始就设定slide实际的width和height大小不同；那么点击 '>'的时候滚动距离就不好控制。所以可以让 slidesPerView 属性为4，其中active的slide利用 transform: scale(2) 放大；再次控制active的位置(利用margin解决active和下一个slide重叠的问题)

2. 之后还遇到一个困惑很久的问题：设置了 loop: true，但是swiper没有完全实现无限滚动；且slide没有被复制。

   • 开始以为是自己的样式和swiper冲突了，经过一些列的尝试后发现是我使用的swiper版本和看的swiper文档例子版本不同
   • · 新版本的swiper使用loop确实不会复制slide，且当 slide < slidesPerView * 2不会无限滚动(github中相关issue:github.com/nolimits4we…)；所以我们要么添加足够的slide，要么自定义swiper循环

tip：当多个swiper DOM容器是通过一次new Swiper创建的(例如使用相同的选择器 .swiper ), 再通过js控制每个swiper的显示和隐藏的时候，swiper容器高度会丢失，每次显隐会抖动；可通过监听来优化

    observer: true, //开启动态检查器，监测swiper
    slide observeParents: true, //监测Swiper 的祖/父元素