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:

• Basic CSS & HTML knowledge
• AMP for WordPress (Optional)

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.

<!--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%;
   }
}

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>

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.

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.

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.

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) {
   amp-carousel amp-img {
      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.

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.

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

Originally posted on 10/12/2020

Versions:

WordPress 5.2.3

AMP 1.2.2