October 2017
Intermediate to advanced
370 pages
8h 57m
English
Let's set up the two carousels. First, why do we need two? The reason is that there will be a different set of product images and preview thumbnail images, based on whether the user chooses the male or female style option. We'll only ever show one of them at a time, and we'll use an amp-selector to switch between them.
In the last example, we used an amp-selector to set the style property to value m or f. We do the same here, but note the different syntax for setting properties initialized with amp-state:
<amp-selector class="style-chooser" on="select:AMP.setState({product: {style: event.targetOption}})"> <span class="female" option="f" selected>F </span> <span class="male" option="m">M </span> </amp-selector> ...Read now
Unlock full access