使用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; 變大變小動畫過渡