Как создать бесконечное горизонтальное выделение изображения, которое заполняет ширину области просмотра копиями его дочерних элементов?

Question

Я пытаюсь настроить выделение изображения на моем веб-сайте , который прокручивается по горизонтали влево.Он использует код JavaScript от этого парня , чтобы продублировать изображения внутри выделенной области, так что выделение никогда не должно останавливаться.

Мне нужны разные выделения в каждой из 4 вкладок сундука.Казалось, что все работает в первой вкладке, пока я не добавил другие области в другие вкладки.Теперь все марки, кроме одного, прокручиваются бесконечно.Остальные перестают дублировать свои изображения, и маркизы исчезают с экрана.Вот снимок экрана с ошибкой, пометки, отличные от первой, которую вы видите при загрузке страницы, перестают дублировать их изображения и становятся пустыми: изображение ошибки

Это происходит только в моих опубликованныхвеб-сайт, а не в фрагменте стека.Тем не менее код кажется одинаковым.Что мне нужно изменить в этом коде, чтобы все вкладки работали?

И есть ли способ сделать так, чтобы JavaScript дублировал достаточно копий изображений внутри выделенной области, чтобы автоматически заполнить ширину области просмотра?Итак, если я добавлю только три изображения, они будут дублироваться (по порядку) до тех пор, пока область просмотра не будет заполнена, и он будет прокручиваться влево, бесконечно.

Фрагмент стека:

for (let i = 1; i < 5; i += 1) {
  marqueeInit({
    uniqueid: `crawler-${i}`,
    style: {
      'height': '124px',
    },
    inc: 5,
    mouse: 'cursor driven',
    moveatleast: 2,
    neutral: 150,
    savedirection: true,
    random: false
  });
}

<script src="https://codepen.io/ali-z/pen/XQoVQQ.js"></script>

<div class="marquee-wrapper">
  <div id="crawler-1" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>

  <div id="crawler-2" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
  <div id="crawler-3" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
  <div id="crawler-4" class="marquee">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6352066183fcd219e067_hat.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd637bfad96ca97f9b5685_armor.png" class="slider-image">
    <img src="https://assets.website-files.com/5cbaabcccbd2ed57cddf7c9a/5cbd6384ef4522dfba912d6b_crown.png" class="slider-image">
  </div>
</div>