投影片廣告
- 摘要樣式輪播廣告頁尾

投影片廣告

摘要

使用 amp-carousel 建立互動式廣告的 AMPHTML 廣告範例。

樣式

這是一個進階範例，需要一些樣式設定才能使其外觀和功能正常。

<style amp-custom>
  /* Main element that contains the creative. */
  .root-container {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    background: #151717 url(/static/samples/img/car-mesh.jpg) center center;
    background-size: cover;
    color: #fff;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .root-container h1 {
    font-weight: normal;
    margin: 10px 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
  }
  .carousel-container {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .carousel-img {
    display: block;
  }
  /*
   * Dimensions of the carousel item are the same as the size of each image
   * plus the border width. Using `calc()` for the sake of the example.
   */
  .carousel-item {
    width: calc(216px + 2 * 4px);
    height: calc(117px + 2 * 4px);
    box-sizing: border-box;
    background: #000;
    float: left;
  }
  .carousel-item .carousel-img {
    border: 4px solid #c9cccc;
  }
  /* Styling for footer */
  .footer {
    background: #000;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
  }
  .stretch {
    flex: 1;
  }
  .logo-img {
    display: block;
  }
  .button {
    text-transform: uppercase;
    padding: 8px;
    color: #fff;
    display: inline-block;
    background-color: #2979ff;
  }
  .button-secondary {
    background: transparent;
    border-right: 1px solid white;
    margin-right: 8px;
  }
</style>

輪播

我們使用 amp-carousel 元件來顯示多個投影片。

所有具有 carousel-item 類別名稱的元素，基本上都具有相同的標記。

AMP 具有事件和動作的系統。它使用特定領域語言來描述動作如何觸發。在此範例中，我們將動作系統與 amp-bind 結合使用，以保持目前選取投影片的狀態變數。

這僅用於在選取的項目滑入檢視畫面時啟用的轉場效果。如果不需要轉場效果，則此範例不再需要 amp-bind。

<amp-carousel
    height="132"
    layout="fixed-height"
    type="slides"
    class="carousel"
    controls>
  <div class="carousel-item">
    <amp-img src="/static/samples/img/car-sideview2.jpg"
        width="216"
        height="117"
        layout="fixed"
        class="carousel-img"></amp-img>
  </div>
  <div class="carousel-item">
    <amp-img src="/static/samples/img/car-gauges.jpg"
        width="216"
        height="117"
        layout="fixed"
        class="carousel-img"></amp-img>
  </div>
  <div class="carousel-item">
    <amp-img src="/static/samples/img/car-sideview1.jpg"
        width="216"
        height="117"
        layout="fixed"
        class="carousel-img"></amp-img>
  </div>
</amp-carousel>
</div>

透過使用動作系統，我們可以在點擊「尋找商店」按鈕時啟用燈箱。

<div class="footer">
  <div class="stretch">
    <amp-img src="/static/samples/img/car-logo.png"
        width="72"
        height="32"
        layout="fixed"
        class="logo-img"></amp-img>
  </div>
  <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button button-secondary">
    Locate Store
  </a>
  <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button">
    Explore
  </a>
</div>

需要進一步說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

由 @zhouyx 撰寫

投影片廣告

摘要

樣式

輪播

廣告頁尾