AMP(Lession 8) - carousel輪播圖片〈進階篇〉

2019鐵人賽 amp 前端 carousel 輪播圖片

majo2013

2018-10-08 20:58:06

2104 瀏覽

分享至

carousel輪播圖片〈進階篇〉

為 `amp-carousel` 設定 `id` 後跳轉圖片

透過 <amp-carousel> 給定 id 值；例： <amp-carousel id="carousel-with-preview">

<button on="tap:carousel-with-preview.goToSlide(index=0)"> ，便可為 <amp-carousel id="carousel-with-preview" 跳往第n張圖（從0開始）

結合 `amp-bind` 得知目前顯示圖是第n張

  <!-- 目前顯示的圖片是3張圖片中的第n張 -->
  <p class="m1"> Selected slide:
    <span [text]="+selectedSlide + 1">1</span>/3</p>

  <!-- [slide] 這個 attribute 設定會決定當前顯示的會是哪張圖 -->
  <!-- slideChange 這個 event 時，設定 selectedSlide 這個 state 值 -->
  <amp-carousel controls
    type="slides"
    width="400"
    height="300"
    layout="responsive"
    [slide]="selectedSlide"
    on="slideChange:AMP.setState({selectedSlide: event.index})">
    <amp-img src="/img/image1.jpg"
      width="400"
      height="300"></amp-img>
    <amp-img src="/img/image2.jpg"
      width="400"
      height="300"></amp-img>
    <amp-img src="/img/image3.jpg"
      width="400"
      height="300"></amp-img>
  </amp-carousel>

範例結果請看

結合 `amp-select` 從預覽圖選擇圖片

<!-- 用 [selected]="selectedSlide" 這方法設定變數，表示看的是第n張圖（ index 也是從 0 開始） -->
<!-- on="select:AMP.setState({selectedSlide: event.targetOption})" 當選擇後，我們設定 selectedSlide 這個變數 -->
<amp-selector layout="container"
  name="carousel-selector"
  [selected]="selectedSlide"
  on="select:AMP.setState({selectedSlide: event.targetOption})">
  <amp-carousel controls
    width="400"
    height="100">
    <amp-img src="/img/image1.jpg"
      width="100"
      height="75"
      option="0"></amp-img>
    <amp-img src="/img/image2.jpg"
      width="100"
      height="75"
      option="1"></amp-img>
    <amp-img src="/img/image3.jpg"
      width="100"
      height="75"
      option="2"></amp-img>
  </amp-carousel>
</amp-selector>

範例結果請看