Photoswipe使用<figure>父容器作为图库项目

Question

我很难让PhotoSwipe使用我需要的标记。我知道修复相当容易，但我似乎无法让它正常工作。这是问题所在：

Getting Started Page上的标记非常简单：

<div class="my-gallery">

    <figure>...</figure>
    <figure>...</figure>
    ...

</div>

在页面上使用Vanilla JS实现，一切正常。但是，我的布局要求我的画廊的以下标记：

<div class="my-gallery">

    <div class="gallery-slide">
        <figure>...</figure>
    </div>

    <div class="gallery-slide">
        <figure>...</figure>
    </div>

    ...

</div>

使用此标记，PhotoSwipe的灯箱部分仍然可以正常工作，但是，图库检测（上一个和下一个箭头）和UID似乎不起作用。

在this CodePen中查看问题。

我知道这是JavaScript中的元素定位问题，我似乎无法正确使用...

希望你能帮忙！