Элементы div с горизонтальной прокруткой не дублируют содержимое, а только окружающий элемент div. ⇐ CSS

[Anonymous]

У меня есть перо, которое обеспечивает плавную горизонтальную прокрутку изображений в div, но оно клонирует только окружающий div, а не IMG или содержимое в div.

Код: Выделить всё

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
position: relative;
}
.horizontal-scrolling-banner div img {
max-height:250px;
}
.horizontal-scrolling-banner {
overflow: hidden;
}

.horizontal-scrolling-banner__helper-wrapper {
align-items: center;
display: flex;
left: 0;
transform: translateZ(0);
transition-property: left;
transition-timing-function: linear;
}



[img]/wp-content/uploads/2024/02/BL_BLCL-lifestyle-phone.jpg[/img]
[img]/wp-content/uploads/2024/02/BL_BLCL_lifestyle-dining.jpg[/img]
[img]/wp-content/uploads/2024/02/LakelandVillageCenter_Coffee.jpg[/img]
[img]/wp-content/uploads/2024/02/BL_BLCL-Lifestyle-farmersmarket.jpg[/img]


(function horizontalScrollingBanner() {
var banners = document.getElementsByClassName('horizontal-scrolling-banner');
if (!banners || banners.length === 0) {
return;
}
var pxPerSecond = 50;
setUpElements();
scrollTheBanners();
window.addEventListener('resize', setUpElements);

function setUpElements() {
for (var i = 0; i < banners.length; i++) {
var currentBanner = banners[i];
var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
if (currentHelperWrapper) {
var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
Array.prototype.forEach.call(clones, function(clone) {
clone.remove();
});
var childrenCount = currentHelperWrapper.children.length;
for (var i = 0; i < childrenCount; i++) {
currentBanner.appendChild(currentHelperWrapper.children[0]);
}
currentHelperWrapper.remove();
}

var children = currentBanner.children;

var bannerWidth = currentBanner.getBoundingClientRect().width;
var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
return r + child.getBoundingClientRect().width;
}, 0);
var currentWidth = childrenWidth;

do {
Array.prototype.forEach.call(children, function(child) {
var clone = child.cloneNode();
clone.setAttribute('aria-hidden', true);
clone.dataset.clone = true;
currentBanner.appendChild(clone);
});
currentWidth += childrenWidth;
} while (currentWidth < minWidthToCoverBanner);

var transitionHelperWrapper = document.createElement('div');
transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
var childrenCount = children.length;
for (var i = 0; i < childrenCount; i++) {
transitionHelperWrapper.appendChild(children[0]);
}
currentBanner.appendChild(transitionHelperWrapper);
transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
}
}

function scrollTheBanners() {
for (var i = 0; i < banners.length;  i++) {
var helperWrapper = banners[i].firstElementChild;
var childrenWidth = helperWrapper.dataset.childrenWidth;
var offsetLeft = helperWrapper.offsetLeft;

if (offsetLeft 
Буду очень благодарен за любую помощь в отношении того, что я сделал не так. :) 

Подробнее здесь: [url]https://stackoverflow.com/questions/78312768/horozontal-scrolling-divs-not-duplicating-the-content-and-only-the-surrounding-d[/url]