Coding a similar items e-commerce carousel with AMP
Include the amp-carousel component in the
<head> section of your site.
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-heightwhich is mandatory for
- Class name can be whatever you want
controlsattribute 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 Code: (I copy-and-pasted the slides to make them 3, but you can add as many as you need)