Learning AMP: Responsive AMP Carousel — AMPire.city

Image for post
Image for post
Originally published at https://ampire.city

What Will I Learn?

Requirements:

Responsive AMP Carousel Example

<!--HTML-->
<amp-carousel id="carouselID" layout="fixed-height" height="120" type="carousel">
<amp-img src="/img/image1.jpg" layout="fill" alt="apples"></amp-img>
<amp-img src="/img/image2.jpg" layout="fill" alt="lemons"></amp-img>
<amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img>
</amp-carousel>
<!--CSS-->
amp-carousel amp-img {
height:120px; width:100%;
max-width:20%; }
@media only screen and (max-width:768px) {
amp-carousel amp-img { min-width: 100%;} }
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

Creating Responsive AMP Carousel

Setting AMP-Carousel type=”carousel”

<amp-carousel id="carouselID" layout="fixed-height" height="120" type="carousel"> 
<amp-img src="/img/image1.jpg" layout="fill" alt="apples"></amp-img>
<amp-img src="/img/image2.jpg" layout="fill" alt="lemons"></amp-img>
<amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img>
</amp-carousel>

Making AMP-Carousel Responsive with CSS

amp-carousel amp-img { 
height:120px;
width:100%;
max-width:20%;
min-width:160px;
}
Image for post
Image for post
You can see a live example of this on the bottom of this website.
amp-carousel amp-img { 
height:120px;
width:100%;
max-width:20%; }
@media only screen and (max-width:768px) {
amp-carousel amp-img {
min-width: calc(50% - 10px); }
}
Image for post
Image for post
Note that the height of amp-carousel will remain 120px.

Implementing AMP-Carousel to WordPress

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store