我在Cargo上尝试自定义我的站点，想要一个带有下面图片缩略图索引的幻灯片画廊。

现在我只是用同一组图片创建了两个画廊，一个是幻灯片风格，另一个是等宽对齐风格。有没有办法通过代码让当你点击第二个画廊中的图片时，幻灯片画廊也跳转到同一张图片？

当前的HTML看起来是这样的：

<gallery-slideshow
    navigation="false"
    autoplay="false"
    limit-by="height"
    transition-type="scrub"
    disable-zoom="true"
>
    <media-item
        class=""
        hash="S2814160660004404052207837000213"
        justify-row-end="true"
        rotation="0"
        scale="100"
        slot="slot-0"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
    <media-item
        class=""
        hash="F2814160778930563095413316268565"
        rotation="0"
        scale="100"
        slot="slot-1"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
    <media-item
        class=""
        hash="J2814157053610597409769367417365"
        rotation="0"
        scale="100"
        slot="slot-2"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        cursor="ew-resize"
        hash="H2814161025028575782772444377621"
        justify-row-end="true"
        rotation="0"
        scale="100"
        slot="slot-3"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="T2814372157735933515435623199253"
        rotation="0"
        scale="100"
        slot="slot-4"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="I2814156590541980927438493200917"
        rotation="0"
        scale="100"
        slot="slot-5"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="K2814156674696027391701467673109"
        rotation="0"
        scale="100"
        slot="slot-6"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="S2814160233478787579895584535061"
        rotation="0"
        scale="100"
        slot="slot-7"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
</gallery-slideshow>

<column-set gutter="3.4rem">
    <column-unit slot="0" span="3">
        <h1>project title</h1>
        specs<br>
        <br>
        description<br>
    </column-unit>
    <column-unit slot="1" span="9">
        <gallery-justify gutter="1rem" mobile-gutter="1rem">
            <media-item
                class=""
                hash="S2814160660004404052207837000213"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-0"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="F2814160778930563095413316268565"
                slot="slot-1"
                limit-by="width"
                scale="100"
                rotation="0"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="J2814157053610597409769367417365"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-2"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="H2814161025028575782772444377621"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-3"
                disable-zoom="true"
                cursor="ew-resize"
            ></media-item>
            <media-item
                class=""
                hash="T2814372157735933515435623199253"
                slot="slot-4"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="I2814156590541980927438493200917"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-5"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="K2814156674696027391701467673109"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-6"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="S2814160233478787579895584535061"
                justify-row-end="true"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-7"
                disable-zoom="true"
            ></media-item>
        </gallery-justify>
    </column-unit>
</column-set>

<br>

解决方案

在这种情况下（请告知Cargo的版本；但通常是2 或3 版），你可能需要JavaScript。尝试将以下代码放在 Custom JS 标签中：

<script>
document.addEventListener("DOMContentLoaded", function() {
    const mainSlideshow = document.querySelector('gallery-slideshow');
    const thumbGallery = document.querySelector('gallery-justify');

    if (!mainSlideshow || !thumbGallery) return;

    const thumbnails = thumbGallery.querySelectorAll('media-item');

    thumbnails.forEach((thumb, index) => {
        thumb.style.cursor = 'pointer';
        thumb.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (typeof mainSlideshow.setIndex === 'function') {
                mainSlideshow.setIndex(index);
            } else {
                mainSlideshow.setAttribute('active-index', index);
            }

            mainSlideshow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        });
    });
});
</script>

如果画廊卡顿（停止或中断），请将其移除并在此处注释。