[AMP] 圖片輪播功能- amp-carousel

AMP 也有提供圖片輪播功能讓開發者可以放到網頁上，首先要先讀入這段 js：

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

基本的用法：

使用 amp-carousel 的標籤，再設定 type="carousel" 後，只要把圖片放進去就可以了。

<amp-carousel height="300" layout="fixed-height" type="carousel" role="region" aria-label="Basic usage carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" alt="and another sample image"></amp-img>
</amp-carousel>

設定 type="slide" 就可以變成輪播

<amp-carousel width="400" height="300" layout="responsive" type="slides" role="region" aria-label="type='slides' carousel">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

加上 autoplay 的屬性就能讓他自動播放，並可在 delay 設定每張停留時間：

<amp-carousel width="400" height="300" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with autoplay">
  <amp-img src="/static/samples/img/image1.jpg" width="400" height="300" layout="responsive" alt="a sample image"></amp-img>
  <amp-img src="/static/samples/img/image2.jpg" width="400" height="300" layout="responsive" alt="another sample image"></amp-img>
  <amp-img src="/static/samples/img/image3.jpg" width="400" height="300" layout="responsive" alt="and another sample image"></amp-img>
</amp-carousel>

設定 data-next-button-aria-label 和 data-next-previous-aria-label 的屬性就能設定切換按鈕的文字內容。

<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide"
  role="region"
  aria-label="Looping carousel">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

設定好後 AMP 就會自動生成 UI，有需要修改樣式的都可以再去看 HTML 的內容後做修改。

參考：amp-carousel