iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

AMP系列 第 7

AMP(Lession 7) - carousel 輪播圖片〈基礎篇〉

carousel輪播圖片〈基礎篇〉

這類的 component ,常見的部分會有:

  • 多張圖片
  • 左右點選前後張照片
  • 點選縮圖或文字,跳至指定的第n張照片
  • 說明文字

如下面四張圖所示:

https://ithelp.ithome.com.tw/upload/images/20180913/20078336E7cHyYOxIi.pnghttps://ithelp.ithome.com.tw/upload/images/20180913/20078336Ocu09OM1NY.pnghttps://ithelp.ithome.com.tw/upload/images/20180913/200783360qQ5Uhsw14.pnghttps://ithelp.ithome.com.tw/upload/images/20180913/200783366WktJHlOBH.png

Required Script

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

基本語法

使用 <amp-carousel> tag ,裡面再放多個 <amp-img> tag ;例如:

<amp-carousel width="450"
  height="300">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

<amp-carousel> tag 上的 Attributes

type

  • slides - 「上一張」、「下一張」的按鈕,當到最後一張時,可重回第一張;同理,可從第一張跳至最後一張。至少要有3張圖片

  • carousel - 預設。不具有 slides 的功能

autoplay & delay & loop - 輪播功能

  • 若設有 autoplay 可達成圖片自動輪播

  • 只有 type="slides" 才會生效

  • delay - 多久(ms)換圖,預設值為5000ms

  • 設了 autoplay 後,會自動設有 loop 重覆播放的功能

data-next-button-aria-label & data-previous-button-aria-label

  • 「上一張」與「下一張」按鈕於 hover 時顯示的文字

  • 若設 data-next-button-aria-label="Go to next slide" ,會呈現的文字將為 Go to next slide (2 of 3) 這般

在圖片加上文字

Dynamic Text Size - 動態文字大小

結合使用 amp-fit-text ;例如:

<amp-carousel class="carousel1"
  layout="responsive"
  height="450"
  width="500"
  type="slides">
  <div class="slide">
    <amp-img src="/img/Border_Collie.jpg"
      layout="responsive"
      width="500"
      height="300"
      alt="Border Collie"></amp-img>
    <amp-fit-text layout="responsive"
      width="500"
      height="150"> The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region for herding livestock, especially sheep. It was specifically bred for intelligence and obedience. Considered highly intelligent, and typically extremely
      energetic, acrobatic, smart and athletic, they frequently compete with great success in dog sports, in addition to their success in sheepdog trials. They are often cited as the most intelligent of all domestic dogs. Border Collies also remain
      employed throughout the world in their traditional work of herding livestock. </amp-fit-text>
  </div>
  <div class="slide">
    <amp-img src="/img/Hovawart.jpg"
      layout="responsive"
      width="500"
      height="350"
      alt="Hovawart"></amp-img>
    <amp-fit-text layout="responsive"
      width="500"
      height="100">
      The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate guard dog", which is the original use for the breed. The breed originated in the Black Forest region and was first described in text and paintings in medieval
      times.
    </amp-fit-text>
  </div>
  <div class="slide">
    <!-- 略,以第一、二項類推 -->
  </div>
</amp-carousel>

注意:

  • 當不同圖片的長寬不等, <amp-img><amp-fit-text> 需要各自做不同的長寬設定

  • 不同圖片的文字有長有短,可能造成不同圖片的文字大小不統一

所以,就我個人好惡上,我不太喜歡這種做法

Text Overlay - 疊加文字

https://ithelp.ithome.com.tw/upload/images/20180916/20078336czFjtE1IA8.png

<amp-carousel class="carousel2"
  layout="responsive"
  height="400"
  width="500"
  type="slides">
  <div class="slide">
    <amp-img src="/img/Border_Collie.jpg"
      layout="fill"
      alt="Border Collie"></amp-img>
    <div class="caption">
      The Border Collie is a working and herding dog breed developed in the Anglo-Scottish border region for herding livestock, especially sheep. It was specifically bred for intelligence and obedience.
    </div>
  </div>

  <div class="slide">
    <amp-img src="/img/Shetland_Sheepdog.jpg"
      layout="fill"
      alt="Shetland Sheepdog"></amp-img>
    <div class="caption">
      The Shetland Sheepdog, often known as the Sheltie, is a breed of herding dog. Less favored nicknames are the Toy Collie and the Miniature Collie. They are small dogs, and come in a variety of colors, such as sable, tri-color, and blue merle. They are
      very intelligent, vocal, excitable, energetic dogs who are always willing to please and work hard.
    </div>
  </div>

  <div class="slide">
    <amp-img src="/img/Hovawart.jpg"
      layout="fill"
      alt="Hovawart"></amp-img>
    <div class="caption">
      The Hovawart is a medium to large size German dog breed. The name of the breed means "an estate guard dog", which is the original use for the breed. The breed originated in the Black Forest region and was first described in text and paintings in medieval
      times.
    </div>
  </div>
</amp-carousel>
  • 圖片用 layout="fill" 達到自動調整大小的效果,就像是 css 中的 object-fit: fill; 的效果

  • 同時,文字區域(上例的 <div class="caption"> ),使用 position: absolute; 以不佔用 <div class="slide"> 可用的空間


參考來源:


上一篇
AMP(Lession 6) - 使用 amp-bind 處理 view 、 data 、 user event 間的關係
下一篇
AMP(Lession 8) - carousel輪播圖片〈進階篇〉
系列文
AMP30

尚未有邦友留言

立即登入留言