AMP教學-輪播元件
BY kate │

AMP教學-輪播元件

先前有提過AMP擁有自成一格的語法,同時限制了Javascript,假如今天想要在畫面上有個輪播區塊時該怎麼辦呢?
AMP提供了許多元件可供使用,同時也詳解了範例和語法,可以自行載入這些範例後再使用css修飾套件。

AMP元件列表
https://ampbyexample.com/
在列表頁中可以看到非常多的元件,從輪播 (amp-carousel)、側邊選單(amp-sidebar)、Facebook粉絲專頁外掛(amp-facebook-page)、fb留言板(amp-facebook-comments)、分享按鈕(amp-social-share)...等都有,簡言之在網頁中幾乎任何可能要觸發行為的都必須使用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實際上不難,只是要搞清楚規則,未來將會介紹其他常用元件喔!

參考與範例文章:https://ampbyexample.com/components/amp-carousel/

更多文章:

  1. AMP教學-amp-bind 增加網頁互動
  2. AMP頁面只適合使用在靜態網站上面嗎?
  3. AMP只適合在手機裝置上觀看嗎?
  4. 每個AMP頁面都必須有非AMP版本嗎?
  5. AMP教學-Tab分頁切換

回應