Creating Responsive AMP Carousel via AMP-Carousel

What Will I Learn?

This tutorial demonstrates how to create a responsive mobile-friendly AMP carousel via amp-carousel on AMP WordPress website.

Skill Requirements:

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Responsive AMP Carousel Example

This code is a minimalistic example of a responsive AMP Carousel power by AMP and amp-carousel. The carousel will have five slides on desktop screens bigger than 768px, and one slide on the smaller mobile screens.

<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>
amp-carousel amp-img {
height:120px;
width:100%;
max-width:20%;
}
@media only screen and (max-width:768px) {
min-width: 100%;
}

If you don’t have AMP for WordPress plugin you’ll have to insert amp-carousel manually.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Creating Responsive AMP Carousel

Before we start, I assume that you already have coded AMP carousel thus I will not go into the detail of doing it in this article. All examples are based on the simplest code possible, but if you want to create a fully working AMP carousel on AMP-friendly WordPress instead, read the tutorial for building amp-carousel from a scratch. You can even learn to build a carousel, populated with ACF Gallery. In this guide I will focus on creating a viable responsive carousel, built with nothing but CSS and amp-carousel. Forget all the complex JavaScript libraries, these two provide us enough to feed the family. Our fantasy is the limit, but let’s start with simple. To convert default AMP carousel into a responsive carousel, we need to change a few options and add some extra CSS lines.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Setting AMP-Carousel type=”carousel”

The title of this segment pretty much explains most of it. AMP-carousel has two types: “slides” and “carousel”. The first one has a lot of layout but it is limited with one slide at a time, thus it cannot do what we try to achieve here. For multiple images or elements to be shown at the same time we need to use the second option – type="carousel". It can show any amount of objects on screen but has limited layout options: “fixed” and “fixed-height”. Both layouts does what it says, so I don’t have to explain these. I imagine that AMP carousels were designed with a primary purpose as a navigation to slider galleries, but it is well suited for website segments, displaying “partners”, “clients” or any other list of logotypes, or images. Hopefully the code below now makes more sense.

<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>

As you might have notice, the height of amp-carousel has a value of 120, which basically means 120px. Fixed-height layout requires height to be set. As I mentioned before, type=”carousel” has limited amount of layouts, the other one being layout="fixed", which requires both height and width to be defined.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Making AMP-Carousel Responsive with CSS

There are countless ways to make amp-carousel to be responsive with CSS, but the simplest solution often is the best. When I was coding the client section you can see on this website below I found this neat solution, which basically goes down to four CSS rules:

amp-carousel amp-img {
   height:120px;
   width:100%;
   max-width:20%;
   min-width:160px;
}

This code will keep up to five slides as long as they are not resized to a lower width than 160px. Note that you have to set the height of amp-img as well.

You can see a live example of this on the bottom of this website.

This code should work just fine on desktop screen sizes, but it might not provide the wanted results on mobile devices. The actual code I used for this website included media query to give a precise width, based on mobile device width.

amp-carousel amp-img {
   height:120px;
   width:100%;
   max-width:20%;
}
@media only screen and (max-width:768px) {
   min-width: calc(50% - 10px);
}

If you want only one slide to be shown on mobile devices, simply set min-width:100%;. In my case, two slides can fit the screen without a problem, thus I want to keep as much visible as possible. I used calc() to leave some space for a margin between the slides of my AMP carousel.

Note that the height of amp-carousel will remain 120px.

As you can see, the two slides stretches throughout the window perfectly. You can experiment further on, as I said your imagination is the limit, but as long as you keep to CSS, this carousel will work fast on mobile devices. That is the power of AMP.

Thank you for visiting AMPire.city!

You got lucky! We have no ad to show for you. If you still want to support my work in a different way, please, subscribe to newsletter or become a Patron

Click on the Ad to support my work.

Implementing AMP-Carousel to WordPress

Generally, AMP framework makes developing websites much easier, but if you are still unable to make amp-carousel to work for you, feel free to contact me via e-mail. In case you want to continue improving your amp carousel, may I suggest adding the popular dots navigation? It used to be a very popular among the websites from the old days, built with JavaScript, but at this time – AMP doesn’t offer a simple solution for this. Despite that, there is a work-a-round. Read tutorial of creating amp-carousel with dots navigation via amp-selector.

Useful links:

  • AMP.dev amp-carousel: https://amp.dev/documentation/components/amp-carousel/
  • Working example: https://www.safari.lt

Originally posted on 10/12/2020

Versions:

WordPress 5.2.3

AMP 1.2.2

Happy Clients

Enjoying ultra-fast mobile-first AMP websites for their competitive businesses.