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

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

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

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

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