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>
Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.
Перейти на Stack Overflow Не нашли пояснения к функции?Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.
Редактировать пример на GitHub-
Written by @zhouyx