javascript - 为什么我的 slider 到达末尾后会变成空白？

Question

我对下面的幻灯片有两个问题。 它是一个“双 slider ”，因此，主体部分有两个同时 slider 。

首先，当我到达最后一个图像(第 9 个图像，因为两个 slider 都包含这么多图像)时，第二个 slider 继续正常工作(无限滑动图像)，但第一个 slider 变成空白。 或者，如果我在开始时单击上一个按钮，那么第二个按钮不起作用并且图像消失，而第一个按钮工作得很好。不明白为什么。我尝试更改 HTML 中的“id”并对其进行样式设置，但没有任何变化。

<小时/> 其次，我最终需要使其更加动态，因此，避免在 HTML 中硬编码图像并将它们放入 JS 中并以某种方式将它们附加到 DOM 中，但不知道到底要做什么；创建数组，还是使用“createElement”？

考虑到提供的代码，哪种逻辑可用于将它们实际包含在 DOM 中并具有以下 slider ？ 因为这是我正在制作的第二个 slider ，所以我发现它非常困难，所以欢迎任何帮助/提示/建议。

P.S 必须是 jQuery 且排除插件，所以请不要提供任何插件链接。

提前谢谢您。

var slides = $('.slide');

slides.first().before(slides.last());

$('button').on('click', function() {
  // Selecting the slides
  slides = $('.slide');
  // Selecting button
  var button = $(this);
  // Register active slide
  var activeSlide = $('.active');

  // Next function
  if (button.attr('id') == 'next') {

    slides.last().after(slides.first());

    activeSlide.removeClass('active').next('.slide').addClass('active');
  }

  // Previous function
  if (button.attr('id') == 'previous') {

    slides.first().before(slides.last());

    activeSlide.removeClass('active').prev('.slide').addClass('active');
  }
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 300px;
  position: absolute;
  transition: 0.6s ease;
  transform: translate(-100%, 0);
}

.slide img {
  width: 100%;
  height: 300px;
}

.slide.active {
  transform: translate(0, 0);
}

.slide.active~.slide {
  transform: translate(100%, 0);
}

body {
  text-align: center;
}

button {
  margin-top: 20px;
  border: none;
  border-radius: 0;
  background: aqua;
  color: #333;
  padding: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide active">
    <img src="Assets/slider-image-1.jpg" alt="">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-2.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-3.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-4.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-5.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-6.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-7.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-8.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-9.jpg">
  </div>
</div>
<div class="slider">
  <div class="slide active">
    <img src="Assets/slider-image-1.jpg" alt="">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-2.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-3.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-4.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-5.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-6.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-7.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-8.jpg">
  </div>
  <div class="slide">
    <img src="Assets/slider-image-9.jpg">
  </div>
</div>

<button id="previous"><img src="Assets/arrow-blue-left.png" alt=""></button>
<button id="next"><img src="Assets/arrow-blue-right.png" alt=""></button>

Answer 1

您的代码无法正常工作，因为 slides = $('.slide') 变量包含两个 slider 中的所有幻灯片。您必须独立操纵 slider 中的幻灯片。第二个失败是在您的示例中，第一张幻灯片是初始事件幻灯片。仅允许第二个 -> 倒数第二个范围内的幻灯片。工作示例here

function handleSlide(slider, direction) {
  var slides = $(slider).find('.slide');
  if(slides.length < 1) return;

  // Register active slide
  var activeSlide = $(slider).find('.active');

  // Next function
  if (direction == 'next') {
    slides.last().after(slides.first());
    activeSlide.removeClass('active').next('.slide').addClass('active');
  }

  // Previous function
  if (direction == 'previous') {
    slides.first().before(slides.last());
    activeSlide.removeClass('active').prev('.slide').addClass('active');
  }
}

$('button').on('click', function() {
    var button = $(this);
    handleSlide($("#slider1"), $(button).attr('id'));
  handleSlide($("#slider2"), $(button).attr('id'));
});