AMP: Building Accelerated Mobile Pages

Reducing code with <amp-selector>

Now that we're using amp-selector, we can improve on the code we wrote earlier to change the slide. The amp-selector component exposes a select event which is fired whenever an option is chosen by the user. We can determine which option was selected with event.targetOption. So instead of adding the on="tap:product-carousel.goToSlide(index=0)" event handler to every amp-img option as we did earlier, we can instead use the select event of the amp-selector element like this:

<amp-selector class="carousel-thumbs" layout="container"   on="select:product-carousel.goToSlide(index=event.targetOption)">

Each amp-img thumbnail will now look like the following, with the on="tap..." event removed:

<amp-img src="img/tshirt-0-f-red-120.png" ...