燈箱內的 AMP 輪播未打開錄制/點擊的圖像

Question

我正在處理谷歌 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）”

演示： 單擊此處

代碼：

<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”

Answer 2

它對我有用

<amp-carousel height='400' layout='fixed-height' type='slides' loop lightbox >
    <div class="article-gallery-item">
        <div class="article-gallery-img">
            <amp-img src="####"></amp-img>
        </div>
    </div>
    <div class='clearfix'></div>
</amp-carousel>