![梅問題－[教學] amp-carousel 讓AMP網頁也支援圖片輪播系統](http://photo.minwt.com/img/Content/webdesign/amp-carousel/amp-carousel_00.jpg)
由於Google為了讓網頁可以快速的開啟，因此推出了AMP的架構，所以當把網頁導入AMP後，會感到相當的受限，因為AMP網頁不再支援外部的Javascript，所以會發現到許多導入AMP的網頁，一眼就看出，最主要的原因就在於，無法製作任何的互動效果，所以能變化的只有版面的編排與配色。
所以有不少的朋友，都覺得Google推出的AMP架構，是給新聞媒體或是部落格使用，其實並非如此，雖然AMP無法自訂Javascript，但也推出各式的網頁互動特效，而今天要來分享的就是carousel，圖片輪播系統，而這也是網頁相當常見的特效，因此現在就一塊來看看，如何在AMP網頁中，加入carousel廣告輪播系統吧！
Step1
首先，先在<head>的標籤中，加入下方的script。
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Step２
接著設定carousel圖片輪播的高度、類型、版型。
<amp-carousel height="300" layout="fixed-height" type="carousel"></amp-carousel>
Step3
再把要輪播的圖片素材，一一的加入在剛剛的標籤中。
<a href="#1"> <amp-img src="https://photo.minwt.com/cc0/06.jpg" width="450" height="300"></amp-img> </a>
![https://photo.minwt.com/cc0/06.jpg"](https://photo.minwt.com/cc0/06.jpg"){kind=link}
#範例預覽
Step4
當一次只要顯示一張時，將原來的type改為slides，與layout=responsive，這樣就可實現一個區塊，完整的顯示一張圖片。
#範例預覽