我正在尝试在my website上设置一个水平滚动到左侧的图片选取框。它使用this guy中的JavaScript代码来复制选取框内的图像，以使选取框永不停止。
我在4个胸部的标签中都需要一个不同的字幕。一切似乎都在第一个选项卡中起作用，直到我在其他选项卡中添加了其他字幕。现在，除其中一个字幕外，所有字幕都可以无限滚动。其余的停止复制其图像，并且字幕从屏幕上消失。这是该错误的屏幕截图，该错误不是页面加载时看到的第一个字幕，而是停止复制其图像并变为空： image of bug
这只会在我发布的网站上发生，而不会在堆栈代码段中发生。但是代码似乎是相同的。为了使所有标签正常工作，我需要更改此代码什么？
有没有一种方法可以使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>