AMP

Thank you!

  • ads

Slides Ad

Summary

Sample AMPHTML ad using amp-carousel to create an interactive ad.

Styling

This is an advanced example that requires some styling to make it look and function properly.

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

We use the amp-carousel component to display multiple slides.

All elements with the carousel-item class-name have essentially the same markup.

AMP has a system in place for events and actions. It uses a domain-specific language to describe how actions are triggered. In this example, we use the actions system in combination with amp-bind to keep a state variable of the current selected slide.

This is only used for transitions that are activated when the selected item slides into view. If the transition is not desired, amp-bind is no longer a requisite for this example.

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

By using the action system, we can activate a lightbox when the "Locate Store" button is tapped.

<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/documentation/examples/" target="_blank" class="button button-secondary">
    Locate Store
  </a>
  <a href="https://amp.dev/documentation/examples/" target="_blank" class="button">
    Explore
  </a>
</div>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub