Para permitir el desplazamiento infinito dentro de un <div> , le agregué un evento de 'scroll' . Cuando el primer niño está en la ventana gráfica, antepongo el último niño y viceversa.
Logré que esto funcionara perfectamente hasta que introduje scroll-snap-align . Aquí, he configurado un ejemplo en el que un carrusel tiene ajuste de desplazamiento mientras que el otro no.
const scrollInfo = (parent) => { let viewWidth = parseInt(getComputedStyle(parent).width), realWidth = parent.scrollWidth - viewWidth, currentChild = Math.floor((parent.scrollLeft + viewWidth / 3) / viewWidth); return { current: currentChild, view: viewWidth }; }; let carousels = [infiniteCarousel1, infiniteCarousel2] carousels.forEach(carousel => { carousel.onscroll = () => { let info = scrollInfo(carousel), scroll = carousel.scrollLeft, len = carousel.children.length - 1; if (info.current <= 0) { carousel.scrollLeft = scroll + info.view; carousel.prepend(carousel.children[len]); } else if (info.current >= len) { carousel.scrollLeft = scroll - info.view; carousel.append(carousel.children[0]); } }; window.addEventListener("DOMContentLoaded", () => { setTimeout(() => { carousel.scrollTo({ left: scrollInfo(carousel).view }); }, 1000); }) }) * { box-sizing: border-box; } .carousel { display: flex; overflow-x: scroll; width: 100%; height: 100px; } .carousel > div { display: inherit; justify-content: center; align-items: center; min-width: 100%; height: 100%; border: 2px solid; scroll-snap-align: center; } #infiniteCarousel1 { scroll-snap-type: x mandatory; } <h2>Scroll Snap</h2> <div id="infiniteCarousel1" class="carousel"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <h2>No Scroll Snap</h2> <div id="infiniteCarousel2" class="carousel"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>El mismo ejemplo en CodePen .
Te diré un truco que usé en el pasado. Agregue una diapositiva adicional de la última diapositiva al principio y una diapositiva adicional de la primera diapositiva al final. Luego, cuando la diapositiva seleccionada sea cualquiera de esas 2. Desplácese a la posición del original sin animación. Avísame si necesitas más ayuda.