同一页面上的多击幻灯片

我正在尝试创建一个Tumblr主题，其中将照片集显示为点按式幻灯片放映。我（终于）设法使它几乎可以工作，但是我仍然遇到一些问题。

1. 第一次浏览幻灯片时，最后一张照片后会有空白，您必须再次单击以使幻灯片再次运行，然后无缝重复播放。

2. 页面上有多个幻灯片演示，并且

   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，因为这是一个主题，而不是一个独立的网站）

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

的CSS

.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;
 }