October 2017
Intermediate to advanced
370 pages
8h 57m
English
The product image gallery we have is nice. It could be nicer, however, if there was a visual indicator to highlight the selected thumbnail. From the last chapter, we know that amp-selector will add a selected attribute to the selected option, so this could help. We could add a border or glow to the selected thumbnail in CSS based on this attribute, and this would serve to indicate which thumbnail was selected.
So, let's put the amp-img thumbnails inside an amp-selector tag (/ch5/product-carousel-selector.html):
<amp-selector class="carousel-thumbs" layout="container"> <amp-img on="tap:product-carousel.goToSlide(index=0)" src="img/tshirt-0-f-red-120.png" width="60" height="60" option="1" selected role="button" ...
Read now
Unlock full access