Amphtml: The goToSlide(index=INTEGER) method for amp-carousel[type="slides"] does not support variables

[zhang-90]

Hello, met a problem, hope can get support.

In our detail page feedback, clicking on the image will show a preview of the large image of the currently loaded item, and swiping left and right. The implementation code is shown in the following figure. However, because goToSlide (index = INTEGER) method, index must be specified as an exact number, although I can get the current image in the front page and save it in state, but it is recognized as invalid.

So in the feedback, every time you click to see the big picture Starting from the first picture, it has a huge impact on the user experience, wondering if the support for indexing support for the goToSlide method is specified as a variable

our detail page

[choumx]

I assume that by "variable" you mean amp-state variable to be used with amp-bind?

In general, you can only use amp-state variables inside attribute bindings. For this case, you want to use a [slide] binding:

<!-- Thumbnail images. -->
<amp-img on="tap:AMP.setState({thisImgIndex: 1})">
<amp-img on="tap:AMP.setState({thisImgIndex: 2})">
...

<!-- Large image carousel. -->
<amp-carousel [slide]="thisImgIndex">

ABE has a sample here: https://ampbyexample.com/advanced/image_galleries_with_amp-carousel/#linking-carousels-with-amp-bind

[zhang-90]

thanks