Multiple click slideshow on same page

Question

I'm trying to create a Tumblr theme where photosets are shown as click-through slideshows. I have (at last) managed to get it to almost work, but I'm still having a couple of issues.

1. On going through the slideshow the first time, there's a blank after the last photo and you have to click again to get the slideshow to run again, after which it repeats seamlessly.

2. There is more than one slideshow on the page, and

   a) If click on the first slideshow the other slideshows scroll through.

   b) Once you get to the final slideshow photo via clicking on the first slideshow, the slideshow goes blank (you can continue clicking on them, but there's no images showing).

If you'd like to try this out in situ to get a better idea of what I mean, you can do so here.

Here's the code as I'm currently using it:

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 (I can't make unique classes/IDs for each slideshow because this is a theme rather than an independent website)

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

Answer 1

$('.active') will target every .active in the DOM, you don't want that.
You just need a this reference:

jQuery(function($) { // DOM ready

  const $slideshow = $('.slideshow');
  $slideshow.find("img:first").addClass('active');
  
  $slideshow.on('click', function() {
    const $actv = $('.active', this); // "active" of THIS!
    const $next = $actv.next()[0] ? $actv.next() : $actv.siblings().first()
    $actv.removeClass('active');
    $next.addClass('active');
  });
  
});

.slideshow {
  position: relative;
  height: 60px;
  width: 60px;
}

.slideshow img {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}

.slideshow img.active {
  opacity: 1;
}

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
  <img src="//placehold.it/60x60/0bf?text=4" />
</div>

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
</div>

<div class="slideshow">
  <img src="//placehold.it/60x60/0bf?text=1" />
  <img src="//placehold.it/60x60/f0b?text=2" />
  <img src="//placehold.it/60x60/fb0?text=3" />
  <img src="//placehold.it/60x60/0bf?text=4" />
  <img src="//placehold.it/60x60/bf0?text=5" />
  <img src="//placehold.it/60x60/b0f?text=6" />
</div>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>