JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<section class="baner">
					<div class="baner__start">
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
						<div class="baner__move"><img src="" alt=""></div>
					</div>
</section>

CSS

.baner {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 6600px;
    justify-content: left;
    margin-bottom: 80px;
}
.baner__start {
    position: relative;
    display: flex;
    flex-direction: row;
}
.baner .baner__move {
    flex: 0 0 auto;
    margin-right: 30px;
}

JavaScript

const baner = document.querySelector('.baner');
if (baner) {
    const banerStart = document.querySelector('.baner__start');
    const images = document.querySelectorAll('.baner__move');
    const banerMove = document.querySelectorAll('.baner__move');
    const clonedItem = banerStart.cloneNode(true);
    clonedItem.classList.add('second');
    baner.appendChild(clonedItem);
    
    let banerWidth = 0;
    for (let i = 0; i < images.length; i++) {
        banerWidth += +banerMove[i].getBoundingClientRect().width;
        const styles = window.getComputedStyle(banerMove[i]);
        const marginRight = parseInt(styles.marginRight, 10);
        banerWidth += marginRight;
    } 
    
    function animationBanerText() {
            document.querySelectorAll('.baner__move').forEach((item) => {
                item.animate([
                    { transform: 'translate(0, 0)' },
                    { transform: 'translate(-' + `${(banerWidth + 4 )}` + 'px, 0)' }
                ], {
                    duration: 20000,
                    iterations: Infinity
                })
            });
    }
    animationBanerText();
}