Carousel Ad
- Summary Styling Carousel

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

Carousel

We use the amp-carousel to display multiple pieces of content along a horizontal axis.

All elements with the carousel-item class-name have essentially the same markup: one container that activates the lightbox, an image, and a button.

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 set the on attribute so the lightbox will activate when a carousel item is tapped. Each button will also toggle the visibility of specific items in the lightbox (see show and 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/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/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/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/documentation/examples/" target="_blank" class="button">
  Learn more
</a>
</div>
</div>

자세한 설명이 필요하신가요?

이 페이지의 설명만으로 궁금한 점이 모두 해결되지 않는다면 다른 AMP 사용자에게 문의하여 구체적인 활용 사례를 논의해 보세요.

Stack Overflow로 이동

설명이 부족한 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub에서 샘플 수정하기

Written by @zhouyx