Marquee Style Infinite Side Scrolling HTML

gistfile1.txt

<div id="scrollerContainer" style="overflow: hidden; display: flex;">

	<!-- fix all the images & images sources in this div imageScoller below -->
    
    <div class="imageScroller" style="flex-shrink: 0; display: inline-flex; justify-content: space-around; min-width: 100%; gap: 1rem;">
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/482.webp" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/395.webp" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/CP770-Cotton-Picker_r4f080304-min.jpg" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/CP770-Cotton-Picker_r4f080383-min.jpg" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/X950-Combine-C16F-Corn_r4f090634-min.jpg" class="scrollingImage" />
        <!-- Add more images as needed -->
        
	</div>
		<!-- paste the finished version of your above imageScoller below -->
        
	<div class="imageScroller" style="flex-shrink: 0; display: inline-flex; justify-content: space-around; min-width: 100%; gap: 1rem;">
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/482.webp" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/395.webp" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/CP770-Cotton-Picker_r4f080304-min.jpg" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/CP770-Cotton-Picker_r4f080383-min.jpg" class="scrollingImage" />
        <img src="https://kairos.lndo.site/wp-content/uploads/2023/08/X950-Combine-C16F-Corn_r4f090634-min.jpg" class="scrollingImage" />
    </div>
</div>

<style>
    #scrollerContainer {
      height: 200px; /* this will adjust the height of the block, change the height below to match */
      width: 100%;
      gap: 1rem; /* if you change the gap here, change it also in keyframe to match */
    }
    .scrollingImage {
	height: 200px; /* adjust the height of the images, keep it the same as the block */
	width: auto;
    }
    @keyframes scroll {
	from {
	    transform: translateX(0);
	}
	to {
	    transform: translateX(calc(-100% - 1rem)) /* if you change the gap from 1rem above change it here too */
	    }
	}
    .imageScroller {
	animation: scroll 20s linear infinite; /* change the seconds to make it slower or faster */
	}

    @media (prefers-reduced-motion: reduce) {
        #imageScroller {
            animation-play-state: paused;
        }
    }
</style>