網頁開發 網頁設計

[教學] amp-carousel 讓AMP網頁也支援圖片輪播特效

梅干 2018/12/18

梅問題-[教學] amp-carousel 讓AMP網頁也支援圖片輪播系統

  由於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>

Step2
接著設定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>

#範例預覽

Step4
當一次只要顯示一張時,將原來的type改為slides,與layout=responsive,這樣就可實現一個區塊,完整的顯示一張圖片。

#範例預覽