870-253-3297

Coding a similar items e-commerce carousel with AMP

Include the amp-carousel component in the <head> section of your site.

Open the amp-carousel tag and set the needed attributes:

<amp-carousel height="418"
                     layout="fixed-height"
                     type="carousel" 
                     class="category-carousel"
                     controls
                     > 
</amp-carousel>

Let’s walk through the attributes:

  1. The height specifies the height in pixels
  2. The layout is fixed-height which is mandatory for type=carousel
  3. Class name can be whatever you want
  4. controls attribute makes sure that the “next” and “previous” arrows are always displayed

Next we want to start adding our slides. We are going to pretend we are selling laptops on our e-commerce site and that we want a carousel that shows similar laptop. We are going to display the laptop’s picture, name, price and location.

Notice how we are defining a width to our amp-img element and later we are using inline styles to our h3 element to select a max-width that is the same as the image’s width:

 <amp-img src="https://picsum.photos/258/193?image=9"
            width="258"
            height="193"
            alt="a sample image">
</amp-img>
......
<h3 class="h3 mb1" style="white-space: normal;max-width: 258px;">
               Super Cool Laptop 
</h3>

This is very important since we do not want the name of the laptop to overflow into the rest of the slides, but we want it to wrap on the next line.

Some of the classes are taken from BassCSS.

Final carousel

Final Code: (I copy-and-pasted the slides to make them 3, but you can add as many as you need)