AMP教學-amp-carousel 輪播

AMP教學-amp-carousel 輪播
先前有提過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檔案
 <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-img語法即可

假如想要修改左右兩邊的箭頭,可以修改 .amp-carousel-button-prev.amp-carousel-button-next 這兩個class
或者想更改外框等可自行增加class或修改css

AMP實際上不難,只是要搞清楚規則,未來將會介紹其他常用組件喔!

參考與範例文章: amp-carousel 範例

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-instagram把IG照片放入文章中