Improving the product image carousel with <amp-bind>

In Chapter 5, Building Rich Media Pages in AMP, we built a product image carousel. We used amp-selector to let the user choose the image to show in the carousel and we used its selected attribute to highlight the selected thumbnail. This all worked great if the user tapped the thumbnails to navigate the images. Recall, however, that if the user swiped through the images, then the highlighted thumbnail would not change, and the thumbnail would be out of sync with the visible carousel image:

Original product carousel from Chapter 5 showing thumbnails out of sync with main image

Note

In this example, we're back using the product page again as starting point: /ch8/product-cart.html.

We can fix this by using amp-bind to change the selected thumbnail in the amp-selector whenever the user changes slide by swiping through the carousel. Lucky for us, amp-carousel exposes a slideChange event that we can use here. This event also exposes the current...