基于pgwSlideshow实现点击缩略图/大图切换下载链接显示状态

我使用pgwSlideshow JS图库展示图片，需要在当前显示的大图与缩略图行之间展示对应图片的下载链接，但缩略图容器内的元素无法点击，因此新增了额外容器放置下载链接。现在需要实现：点击缩略图或大图切换时，为对应图片的下载链接添加show类显示，其余下载链接添加hidden类隐藏。

现有代码 #

<ul id="pgwCotainer" class="pgwSlideshow">

    <!-- begin additional part -->
    <div class="moreInfo col-md-12">
        <div class="row">
            <div class="row articleinfos">
                <ul class="col-md-3 einzeldownload">
                    <li class="item-1 show">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image1.zip">image1.zip</a>
                    </li>
                    <li class="item-2 hidden">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image2.zip">image2.zip</a>
                    </li>
                    <li class="item-3 hidden">
                        <a download class="download-archive icon-download-pfeil-boden uppercase" href="https://domain/files/image3.zip">image3.zip</a>
                    </li>
                </ul>
                <a href="#" class="col-md-3 icon-download-pfeil-boden uppercase">Alle Bilder</a>
                <a href="#" class="col-md-6 text-right text-beitrag icon-download-pfeil-boden uppercase">kompletter Beitrag</a>
            </div>
        </div>
    </div>
    <!-- end additional part -->

    <li>
        <img src="https://domain/image/image-1.jpg" alt="Bild 1 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-1.jpg"/>
        <p class="uppercase">Bild 1</p>
    </li>
    <li>
        <img src="https://domain/image/image-2.jpg" alt="Bild 2 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-2.jpg"/>
        <p class="uppercase">Bild 2</p>
    </li>
    <li>
        <img src="https://domain/image/image-3.jpg" alt="Bild 3 Lorem ipsum "
             data-description=""
             data-large-src="https://domain/small-image/image-3.jpg"/>
        <p class="uppercase">Bild 3</p>
    </li>
</ul>

解决方案 #

利用pgwSlideshow自带的afterSlide回调事件，在幻灯片切换时更新下载链接的显示状态：

1. 初始化图库并配置回调 #

document.addEventListener('DOMContentLoaded', function() {
    // 初始化pgwSlideshow
    const slideshow = new pgwSlideshow({
        container: '#pgwCotainer',
        // 切换幻灯片后触发的回调
        afterSlide: function(currentSlideIndex) {
            // 下载链接的item编号从1开始，索引从0开始，所以+1
            updateDownloadLinks(currentSlideIndex + 1);
        }
    });

    // 页面加载完成后先初始化显示第一张的下载链接
    updateDownloadLinks(1);
});

2. 实现更新下载链接的函数 #

function updateDownloadLinks(activeItemNum) {
    const allDownloadItems = document.querySelectorAll('.einzeldownload li');
    
    allDownloadItems.forEach(item => {
        // 清除所有状态类
        item.classList.remove('show', 'hidden');
        // 给当前项加show，其余加hidden
        if (item.classList.contains(`item-${activeItemNum}`)) {
            item.classList.add('show');
        } else {
            item.classList.add('hidden');
        }
    });
}

样式补充 #

确保你的CSS中定义了以下样式（根据实际需求调整）：

.show {
    display: block !important;
}

.hidden {
    display: none !important;
}

内容的提问来源于stack exchange，提问作者m.orange