Цикличная бегущая строка с изображениями

 <script> function customizeGL11() {
    	function t552_init(recId, anmScroll, speed, heightZero) {
    		recId = recId.slice(1);
    		let rec = document.getElementById(recId);
    		let allRec = document.getElementById('allrecords');
    		if (!rec) {
    			return false;
    		}
    		rec.classList.add('customGL11');
    		allRec.style.overflow = 'hidden';
    		let wrapper = rec.querySelector('.t552');
    		let wrapperChild = wrapper.children[0];
    		let wrapperImg = wrapperChild.childNodes[0].childNodes[0];
    		for (let i = 0; i < 6; i++) {
    			let clone = wrapperChild.cloneNode(true);
    			wrapperChild.after(clone);
    			wrapperChild.before(clone);
    		}
    		let container = rec.querySelector('.t552__container');
    		let containers = rec.querySelectorAll('.t552__container');
    		if (anmScroll == '1') {
    			t522_scrollAnimInit()
    		} else {
    			t552_startAnim()
    		}
    		function t552_startAnim() {
    			container.setAttribute('aria-hidden', 'true');
    			containers.forEach(el => el.classList.add('marquee_256661161750'));
    		}
    		function t522_scrollAnimInit() {
    			containers.forEach(el => el.classList.remove('marquee_256661161750'));
    			let prev = window.pageYOffset + containers[1].getBoundingClientRect().top;
    			const screenWidth = window.screen.width;
    			const screenHeight = window.screen.height;
    			let x = -screenWidth;
    			if (screenWidth < 500) {
    				containers.forEach(el => el.style.transform = 'translateX(' + x * 8 + 'px)');
    				x *= 8
    			} else {
    				containers.forEach(el => el.style.transform = 'translateX(' + x * 4 + 'px)');
    				x *= 4
    			}
    			window.addEventListener('scroll', () => scrollAnim());
    			function scrollAnim() {
    				let sliderTop = containers[1].getBoundingClientRect().top;
    				let sliderBottom = containers[1].getBoundingClientRect().bottom;
    				let sliderHeight = containers[1].clientHeight;
    				const current = window.pageYOffset;
    				if (window.pageYOffset + screenHeight >= window.pageYOffset + sliderTop && sliderBottom + screenHeight > 0) {
    					if (screenWidth > 500) {
    						if (prev > current) {
    							speed > 10 ? x += 12 : x += speed
    						} else {
    							speed > 10 ? x -= 12 : x -= speed
    						}
    					} else {
    						if (prev > current) {
    							speed > 5 ? x += 5 : x += speed
    						} else {
    							speed > 5 ? x -= 5 : x -= speed
    						}
    					}
    					prev = current;
    					containers.forEach(el => el.style.transform = 'translateX(' + x + 'px)');
    				} else if (sliderTop > screenHeight || sliderBottom + 200 < 0) {
    					let x = -screenWidth;
    					if (screenWidth < 500) {
    						containers.forEach(el => el.style.transform = 'translateX(' + x * 8 + 'px)');
    					} else {
    						containers.forEach(el => el.style.transform = 'translateX(' + x * 4 + 'px)');
    					}
    				}
    			}
    		}
    	}
    	function n_ready(t) {
    		"loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange",
    		function() {
    			"loading" != document.readyState && t()
    		})
    	}
    	n_ready(function() {
    		t552_init('', '0', 12, 0);
    		document.querySelectorAll(' .t552__container .t552__blockimg').forEach(function(item) {
    			let imgUrl = item.getAttribute("data-original");
    			item.style.background = `url($ {
    				imgUrl
    			}) center center / cover no - repeat`;
    		});
    	});
    }
        customizeGL11();
        </script> <style>
    :root {
      --wheels: 9s;
      --mobileWheels: 25s;
      --dirZero: 0%;
      --dirHero: -100%;
      --mobileWidth: 150px;
      --mobileHeight: 150px;
      --imgMargin: 0px;
      --animState: paused;
    }
    .customGL11 .t552 {
    	display:flex;
    	transform:rotate(0deg);
    	z-index:4;
    	white-space:nowrap;
    	position:relative;
    }
    .customGL11 .t552__container {
    	flex-shrink:0;
    	width:max-content!important;
    }
    .customGL11 .t552__tile {
    	transition:all 0.1s ease-in-out;
    	width:25vw;
    	margin-right: var(--imgMargin);
    	margin-left: var(--imgMargin);
    }
    .marquee_256661161750 {
    	animation:scroll305752848183 var(--wheels) linear infinite;
    }
    .customGL11
    	.t552:hover .marquee_256661161750 {
    	animation-play-state: var(--animState);
    }
    @media(max-width:640px) {
        .t552__container {
        	width:max-content!important;
        }
        .t552__tile {
        	width: var(--mobileWidth) !important;
        }
    }
    @media(max-width:640px) {
        .t552__container {
        	width:max-content!important;
        }
        .t552__tile {
        	width: var(--mobileWidth) !important;
        }
        .customGL11 {
        	overflow:unset!important;
        }
        .marquee_256661161750 {
        	animation:scroll305752848183 var(--mobileWheels) linear infinite;
        }
    }@media(max-width:980px) {
    	.customGL11 .t552__blockimg {
    	height: var(--mobileHeight) !important
    }
    }@keyframes scroll305752848183 {
    	from {
    	    transform:translateX(var(--dirZero));
        }
        to {
        	transform:translateX(var(--dirHero));
        }
    }@keyframes scrollReverse488758371056 {
    	from {
    	   transform:translateX(var(--dirZero));
        }
        to {
        	transform:translateX(var(--dirHero));
        }
    }
    </style>