AMP教學-amp-carousel 輪播
BY kate │
先前有提過AMP擁有自成一格的語法，同時限制了Javascript，假如今天想要在畫面上有個輪播區塊時該怎麼辦呢?
AMP提供了許多組件可供使用，同時也詳解了範例和語法，可以自行載入這些範例後再使用css修飾組件。
AMP組件列表
AMP範例列表
在列表頁中可以看到非常多的組件，從輪播 (amp-carousel)、側邊選單(amp-sidebar)、Facebook粉絲專頁外掛(amp-facebook-page)、fb留言板(amp-facebook-comments)、分享按鈕(amp-social-share)...等，應用的好連AMP分頁切換都能製作，簡言之在網頁中幾乎任何可能要觸發行為的都必須使用AMP組件。
組件使用原理
大部分的組件都先必須載入一支專屬的js檔案，然後寫入專屬語法，組件才能有效果。所有的效果都是以js檔案控制，但改不到這一個檔案，如果有任何想修改的部分建議利用css來處理較佳。
以輪播組件為範例:
首先在<head>裡面載入js檔案
最外層的寬高是指整個輪播的寬高
由於是輪播，裡面就會有圖片，圖片語法直接照amp-img語法即可
假如想要修改左右兩邊的箭頭，可以修改
或者想更改外框等可自行增加class或修改css
AMP實際上不難，只是要搞清楚規則，未來將會介紹其他常用組件喔!
參考與範例文章: amp-carousel 範例
AMP提供了許多組件可供使用，同時也詳解了範例和語法，可以自行載入這些範例後再使用css修飾組件。
AMP組件列表
AMP範例列表
在列表頁中可以看到非常多的組件，從輪播 (amp-carousel)、側邊選單(amp-sidebar)、Facebook粉絲專頁外掛(amp-facebook-page)、fb留言板(amp-facebook-comments)、分享按鈕(amp-social-share)...等，應用的好連AMP分頁切換都能製作，簡言之在網頁中幾乎任何可能要觸發行為的都必須使用AMP組件。
組件使用原理
大部分的組件都先必須載入一支專屬的js檔案，然後寫入專屬語法，組件才能有效果。所有的效果都是以js檔案控制，但改不到這一個檔案，如果有任何想修改的部分建議利用css來處理較佳。
以輪播組件為範例:
首先在<head>裡面載入js檔案
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
然後在<body>裡面，選擇要出現輪播的位置放入語法，這是一個單圖輪播的語法。
<amp-carousel width="400"語法解釋
height="300"
layout="responsive"
type="slides"
autoplay
delay="2000">
<amp-img src="/img/image1.jpg"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="/img/image2.jpg"
width="400"
height="300"
layout="responsive"
alt="another sample image"></amp-img>
<amp-img src="/img/image3.jpg"
width="400"
height="300"
layout="responsive"
alt="and another sample image"></amp-img></amp-carousel>
最外層的寬高是指整個輪播的寬高
| 語法 | 解釋 |
| layout="responsive" | 響應式的意思 |
| type="slides" | 輪播形式，這是大圖輪播，另外有 type="carousel" 代表圖片會以多張圖的方式出現，並且往右邊點擊可看下一張 |
| autoplay | 自動播放，如果不希望自動輪播則拿掉這段即可 |
| delay="2000" | 自動播放停留的秒數，此指2秒之意 |
假如想要修改左右兩邊的箭頭，可以修改
.amp-carousel-button-prev 和 .amp-carousel-button-next 這兩個class或者想更改外框等可自行增加class或修改css
AMP實際上不難，只是要搞清楚規則，未來將會介紹其他常用組件喔!
參考與範例文章: amp-carousel 範例
