Несколько слайд-шоу с помощью jquery на одной странице, что создает проблемы

Question

Я пытаюсь создать тему 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 (я не могу сделать уникальные классы / идентификаторы для каждого слайд-шоу, потому что это тема, а ненезависимый сайт)

<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') будет нацелен на каждого .active в DOM, вы этого не хотите.
Вам просто нужна ссылка this:

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>