Jquery 在同一页面上多次单击幻灯片放映

我正在尝试创建一个Tumblr主题，其中Photoset显示为点击式幻灯片。我（终于）设法让它几乎可以工作了，但我仍然有几个问题

在第一次进行幻灯片放映时，最后一张照片后会出现一个空白，您必须再次单击以再次运行幻灯片放映，然后它会无缝地重复

页面上有多个幻灯片，并且

a） 如果单击第一个幻灯片，其他幻灯片将滚动显示

b） 一旦你通过点击第一个幻灯片来获得最终的幻灯片照片，幻灯片将变为空白（你可以继续点击它们，但没有图像显示）

如果你想在现场尝试一下，更好地理解我的意思，你可以这样做

以下是我当前使用的代码：

JQuery

$('.slideshow img:first-child').addClass('active');
$(document).ready(function () {
    $('.slideshow').on('click', function () {
        if ($('.active').next('.slideshow img').length) {
            $('.active').removeClass('active').next('.slideshow img').addClass('active');
        } else {
            $('.active').removeClass('active');
            $('.slideshow img').first().addClass('active');
        }
    });
});

HTML（我不能为每个幻灯片制作唯一的类/id，因为这是一个主题，而不是一个独立的网站）

$（'.active'）

将针对DOM中的每个.active，您不希望这样。
您只需要一个

此

参考：

jQuery（函数（$）{//DOM就绪
常量$slideshow=$（'.slideshow'）；
$slideshow.find（“img:first”）.addClass（“active”）；
$slideshow.on（'click'，function（）{
const$actv=$（'.active'，this）；/“active”this！
const$next=$actv.next（）[0]？$actv.next（）：$actv.sides（）.first（）
$actv.removeClass（'active'）；
$next.addClass（'active'）；
});
});
。幻灯片放映{
位置：相对位置；
高度：60px；
宽度：60px；
}
.幻灯片{
位置：绝对位置；
排名：0；
不透明度：0；
过渡：0.5s；
}
.幻灯片显示img.active{
不透明度：1；
}

谢谢！我有一种感觉，它将涉及“this”选择器，但我对JQuery的理解令人难以置信地摇摆不定。我一定会努力想办法解决这个问题。再次感谢@瑟拉菲尔，不客气。因此，在
$slideshow中，（'click'），
--这个
指的是当前正在迭代的幻灯片。所以最后，
$actv
和
$next
将指的是各自的幻灯片。
<div class="slideshow right_part>
    <img src="image_one.jpg" />
    <img src="image_two.jpg" />
    <img src="image_three.jpg" />
    <img src="image_four.jpg" />
</div>

<div class="slideshow right_part>
    <img src="image_un.jpg" />
    <img src="image_deux.jpg" />
    <img src="image_trois.jpg" />
</div>

<div class="slideshow right_part>
    <img src="image_uno.jpg" />
    <img src="image_dos.jpg" />
    <img src="image_tres.jpg" />
    <img src="image_cuatro.jpg" />
    <img src="image_cinco.jpg" />
    <img src="image_seis.jpg" />
</div>

.right_part {
       grid-area: rightpart;
       place-self: center;
       height: 100vh;
       display: flex;
       align-items: center;
       max-width: calc(100vw - 500px);
 }

.slideshow img {
       position: absolute;
       display: inline-block;
       max-width: calc(100vw - 500px);
       max-height: 90vh;
       margin: auto;
       align-self: center;
       opacity: 0;
       transform: translateX(-50%);
       -webkit-transition-duration: 0.5s;
       transition-duration: 0.5s;     
 }

 .slideshow {
       overflow: hidden;
 }

 .slideshow img.active {
       opacity: 1;
 }