October 2017
Intermediate to advanced
370 pages
8h 57m
English
The goToSlide() method allows us to advance a carousel to a specific slide. It takes the index of the slide that should be displayed, starting at 0. So, with our product carousel, we can attach a tap event like this to each of the product thumbnails:
on="tap:product-carousel.goToSlide(index=3)"
This translates roughly as: "When this element is tapped, find the element with id equal to product-carousel, and display slide 3."
The markup for each of the thumbnails will now look something like this:
<amp-img on="tap:product-carousel.goToSlide(index=0)" role="button" tabindex="" src="img/tshirt-0-f-red-120.png" width="60" height="60"></amp-img>
Read now
Unlock full access