October 2017
Intermediate to advanced
370 pages
8h 57m
English
Before we start the product details page, let's pimp up the product listing page a bit more. A common design pattern is to promote special offers and product categories in a sliding hero carousel at the top of the page. Let's add this. This time we'll add the attribute type="slides" to the amp-carousel element, and have it automatically advancing through some main categories and offers, with nice, large hero images.
We'll start off with this markup for the carousel element, using responsive layout (layout="responsive") so that it will fill the viewport:
<amp-carousel id="hero-images" width="1024" height="480" layout="responsive" type="slides"> ...</amp-carousel>
Read now
Unlock full access