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:
- The height specifies the height in pixels
- The layout is
fixed-height
which is mandatory fortype=carousel
- Class name can be whatever you want
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)