同一页面上的多次单击幻灯片

Question

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

1. 第一次浏览幻灯片时，最后一张照片后面有一个空白，您必须再次单击才能让幻灯片再次运行，之后它会无缝重复。

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

   a) 如果单击第一个幻灯片，其他幻灯片会滚动显示。

   b) 当您通过点击第一张幻灯片获得最终的幻灯片照片后，幻灯片会变为空白（您可以继续点击它们，但不会显示任何图像）。

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

这是我目前使用的代码：

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

Answer 1

$('.active') 将针对 DOM 中的每个 .active，您不希望这样。
你只需要一个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>