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>
Carousel
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>
Ad footer
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-
Written by @zhouyx