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>
</div>
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>
Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.
Ir para o Stack Overflow Falta explicar algum recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Editar amostra no GitHub-