AMP: Building Accelerated Mobile Pages

Using <amp-selector> for image preview thumbnails

Next, let's build the preview thumbnails. This will be very similar to the code we saw earlier in this chapter when we improved the carousel with amp-bind. We'll use amp-selector and amp-bind to set the currentImage property.

We're also going to use these thumbnails to set the color option. Remember how we set up the colors with amp-state earlier:

"colors": {  "0":"red",  "1":"black",  "2":"blue",  "3":"green"}

We can use event.targetOption here to give us the option that was selected--a number between 0 and 3 in this case. So, for example, if event.targetOption is 2, then product.colors[event.targetOption] would evaluate to blue. So now we can set the two properties with the following:

on="select:AMP.setState({product: ...