現在swiper滑動外掛已經更新到4.0的版本了，與之前的2.0和3.0的版本有了一些改動，所以寫的時候一定要注意，所以例如autoplay，之前autoplay的寫法autoply：3000，現在的寫法autoplay{delay:3000，stopOnLastSlide:false},現在的autoplay變成了元件，裡面可以放很多屬性。以前的autoplay僅僅作為一個屬性，現在則變成了元件，元件化思想會越來越流行。同樣的還有很多，例如;以前增加的點選事件 onclick:function(swiper){alert(swiper)} 現在增加的點選事件：on：{click：function(){alert(swiper)} }。現在的事件都放在元件on裡面了。其實要學會自己看api文件。

關於在專案中用到的ion-slides的問題。其實ionic3.0基於最新的swiper封裝好了。所以原理都是一樣的，可能寫法有些不一樣。所以就是可以先參考swiper，找到方法之後，在根據ionic的寫法來實現。

例如這次專案中實現的效果是這樣的，輪播圖，螢幕上顯示三張圖片，一張居中且寬高100%，其餘兩張圖片居於兩邊且只顯示10/1寬度，高度為80%左右，中間的那張大圖有陰影效果。怎麼實現呢，首先讓圖片居中顯示，這就用到centeredSlides：true，設定為true的時候圖片顯示居中。spaceBetween=10，spaceBetween是設定兩張輪播圖之間的距離，其實就是加了一個margin-Left=10px的樣式。

其實從這次做專案中還發現這個現象，在瀏覽器看效果的時候，centeredSlides沒有起到絕對的效果，還得給每個ion-slide加上一個移動的效果：transform：translateX(13%);但是在手機上看的時候centeredSlides起的作用是絕對的，沒有必要加transform這個移動樣式。至於原因我至今沒有找到，為什麼瀏覽器上的顯示效果和手機上顯示的效果不一樣呢，這個問題以後會慢慢探索。

重新回顧的時候我發現了真正的問題所在，原因在於樣式的設定
html程式碼如下：

<ion-slides *ngIf="posterList.length>1" #slides
 
 centeredSlides loop spaceBetween=10 slidesPerView="auto" (ionSlideDidChange)="slideChanged()">
<ion-slide *ngFor="let poster of posterList"><img class="poster_img" [src]="poster.picUrl"/></ion-slide>
</ion-slides>

css程式碼如下：

.swiper-slide{
width: 80%!important;
}
.poster_img{
width:100%;
}
ion-slides{
height:80%;
margin: 30px 0 15px;
}
.swiper-slide-prev,.swiper-slide-next{
margin-top:3%;
height:80%;
}
.swiper-slide-active{
 img{
 border-radius:16px;
 box-shadow: 0 10px 16px #eee;
 }
}

效果圖如下：
![這裡寫圖片描述]

其實我最後發現主要起作用的是我設定的樣式原因
1.首先我設定了loop迴圈播放，所以每張圖片都有上一張和下一張，也就是每張都有一個swiper-slide-prev（上一張）和swiper-slide-next（下一張）
2.我給每張圖片的上一張和下一張都設定了樣式，還有就是swiper-slide-active（當前圖片的樣式），所以就有了現在的大體效果圖。通過設定spaceBetween=10來設定每張圖片之間的間距。
3.還有就是怎麼讓圖片居中，在chrome瀏覽器的手機模式除錯的時候，我給每張圖片增加了transform：translateX(13%);在x軸上移動13%的寬度來達到居中的效果，主要是centeredSlides 這個屬性沒有起作用，但是在真正的手機上除錯的時候，這時候centeredSlides 這個屬性反而起作用了，所以就把動畫的移動樣式去掉了。至於為什麼在pc的chrome瀏覽器的手機模式和真正的手機顯示不一樣，這個原因我沒有找到。找到之後我再更新。