Почему мой слайдер go пуст после достижения конца?

Question

У меня две проблемы / проблемы со следующим слайдом. Это «двойной слайдер», то есть два одновременных слайдера в корпусе.

Во-первых, когда я достигаю последнего изображения (9-го, потому что в нем содержится много слайдеров), второй слайдер продолжает работать должным образом (бесконечно скользя изображения), но первый просто становится пустым. Или, если я нажму на предыдущую кнопку в начале, то вторая не сработает и изображения исчезнут, а первая работает хорошо. Не могу понять почему. Я попытался изменить "id" в HTML и стилизовать его, но ничего не изменилось.

---

Во-вторых, мне, наконец, нужно сделать его более динамичным c, чтобы избежать жесткого кодирования изображений в HTML, вставить их в JS и каким-то образом добавить их в ДОМ, но не знаю, что именно делать; создание массива или использование «createElement»?

И какие логи c можно было бы использовать для фактического включения их в DOM и иметь следующие ползунки, учитывая предоставленный код? Так как это мой второй слайдер, который я делаю, я нашел его довольно сложным, поэтому любая помощь / подсказка / совет приветствуются.

PS Должно быть в 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') содержит все слайды с обоих ползунков. Вы должны управлять слайдами в слайдерах независимо. Вторая ошибка в том, что в вашем примере первый слайд является начальным активным слайдом. Допускаются только слайды в диапазоне второй -> предпоследний. Рабочий пример здесь

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

Answer 2

Загрузка изображений динамически: это можно сделать, определив массив, содержащий изображения, и вы можете добавить изображения в ползунок, используя метод jQuery 'append'. Рабочий пример для jsFiddle .

function fillSliders(slider, images) {
    $(slider).empty();
    for(var i = 0; i < images.length; i++) {
        if(typeof images[i] == "string" && images[i] !== "") {
            var active = (i == 1) ? " active" : "";
            $(slider).append('<div class="slide'+active+'"><img src="'+images[i]+'" 
                              alt="image-'+i+'" /></div>');
        }
    }
}
var images = ["image1.jpg", "image2.jpg","image3.jpg","image4.jpg"];
fillSliders($("#slider"), images);