javascript - 灯箱内的 AMP 轮播无法打开录制/单击的图像

Question

我正在处理 Google AMP 页面。我在 amp-lightbox 中实现了 AMP-carousel，这样如果我有多个图像并单击其中一个，它就会打开具有轮播行为的灯箱。

到目前为止一切正常。但现在我进行了设计更改，以便在主图像下方显示一张主图像和三张缩略图:以防我有四个或四个以上图像。

因此，为此，我想打开单击的任何图像作为轮播中显示的第一张图像。

我尝试了不同的解决方法，但目前没有任何帮助。例如，我尝试使用 AMP 提供的 on 属性来传递索引值，但我认为它直接用于灯箱，而不是灯箱内的轮播。

这是演示: https://jsfiddle.net/kfd8e6sr/26/

你可以看到，无论我点击什么图像，它总是打开第一张图像。

代码:

<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=1">
  </amp-img>
</div>
<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=2">
  </amp-img>
</div>
<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox" role="button" layout="responsive" src="https://picsum.photos/200/300?image=3">
  </amp-img>
</div>

<amp-lightbox id="my-lightbox" layout="nodisplay" on="tap:my-lightbox.close" tabindex="1">
    <amp-carousel dir="ltr" width="16" height="9" layout="responsive" type="slides"  on="tap:my-lightbox.close" role="button">
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=1">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=2">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=3">
        </amp-img>
    </amp-carousel>
</amp-lightbox> 

Answer 1

使用 on="tap:YOUR-CAROUSEL-ID.goToSlide(index=INDEX-NUMBER)"

演示:Click Here

代码:

<div class="img-container">
  <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=0)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=1">
  </amp-img>
  </div>
  <div class="img-container">
    <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=1)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=2">
    </amp-img>
  </div>
<div class="img-container">
      <amp-img width="200" height="130" on="tap:my-lightbox,carousel-with-preview.goToSlide(index=2)" role="button" layout="responsive" src="https://picsum.photos/200/300?image=3">
      </amp-img>
</div>

<amp-lightbox id="my-lightbox" layout="nodisplay" tabindex="1">
<button on="tap:my-lightbox.close">
Close
</button>
    <amp-carousel id="carousel-with-preview" dir="ltr" width="16" height="9" layout="responsive" type="slides"  role="button">
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=1">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=2">
        </amp-img>
        <amp-img width="768" height="430" layout="responsive" src="https://picsum.photos/200/300?image=3">
        </amp-img>
    </amp-carousel>
</amp-lightbox>

注意:轮播索引从0开始

如何为一个事件调用多个操作？

示例:on="tap:target1.actionA,target2.actionB"