AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt
  • 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>

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>
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub