輪播廣告
- 摘要樣式輪播

輪播廣告

摘要

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

樣式

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

<style amp-custom>
  .root-container {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    background: #6a594b;
    color: #ffffff;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .main-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }
  .footer {
    background: #000000;
    color: #ffffff;
    padding: 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
  }
  .footer-logo {
    border-right: 1px solid #ffffff;
    padding: 0 8px 0 0;
    margin: 0 8px 0 0;
  }
  .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
  }
  .logo-img {
    display: block;
  }
  .stretch {
    flex: 1;
  }
  .button {
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
    padding: 6px 10px;
    color: #ffffff;
    display: inline-block;
    background-color: #2979ff;
  }
  .carousel-item {
    width: 184px;
    height: 105px;
    padding: 12px 2px;
    color: #000000;
    position: relative;
  }
  .carousel-item:first-child {
    padding-left: 12px;
  }
  .carousel-item:last-child {
    padding-right: 12px;
  }
  .carousel {
    width: 100%;
    position: absolute;
  }
  .carousel-item-inner {
    width: 180px;
    height: 105px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    position: relative;
  }
  .carousel-img {
    display: block;
    border: 2px solid #ffffff;
    border-radius: 2px;
  }
  .carousel-button-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    text-align: center;
  }
  .learn-more a {
    padding: 8px 0;
    text-transform: uppercase;
    display: inline-block;
    color: #2979ff;
    text-decoration: none;
    font-weight: bold;
  }
</style>

輪播

我們使用 amp-carousel 沿水平軸顯示多個內容片段。

所有具有 carousel-item 類別名稱的元素，基本上都具有相同的標記：一個用於啟動燈箱的容器、一個圖片和一個按鈕。

AMP 具有事件和動作的系統。它使用特定領域語言來描述動作如何觸發。在此範例中，我們設定了 on 屬性，以便在點擊輪播項目時啟動燈箱。每個按鈕也會切換燈箱中特定項目的可見性 (請參閱 show 和 hide)。

<amp-carousel
    height="132"
    layout="fixed-height"
    type="carousel"
    class="carousel">
  <div class="carousel-item">
    <div class="carousel-item-inner">
      <amp-img src="/static/samples/img/car-engine.jpg"
          width="177"
          height="100"
          layout="fixed"
          class="carousel-img"></amp-img>
      <div class="carousel-button-container">
        <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button carousel-button">
          6C Tuned Engine
        </a>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="carousel-item-inner">
      <amp-img src="/static/samples/img/car-gauges.jpg"
          width="177"
          height="100"
          layout="fixed"
          class="carousel-img"></amp-img>
      <div class="carousel-button-container">
        <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button carousel-button">
          Sport Gauge Cluster
        </a>
      </div>
    </div>
  </div>
  <div class="carousel-item">
    <div class="carousel-item-inner">
      <amp-img src="/static/samples/img/car-seats.jpg"
          width="177"
          height="100"
          layout="fixed"
          class="carousel-img"></amp-img>
      <div class="carousel-button-container">
        <a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button carousel-button">
          Luxury Seats
        </a>
      </div>
    </div>
  </div>
</amp-carousel>
</div>

<div class="footer">
<div class="footer-logo">
  <amp-img src="/static/samples/img/car-logo.png"
      width="72"
      height="32"
      layout="fixed"
      alt="Howdy"
      class="logo-img"></amp-img>
</div>
<div class="stretch">The All-New WX-S R5</div>
<a href="https://amp.dev.org.tw/documentation/examples/" target="_blank" class="button">
  Learn more
</a>
</div>
</div>

需要進一步說明嗎？

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

前往 Stack Overflow

有未說明的特色功能？

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

在 GitHub 上編輯範例

由 @zhouyx 撰寫