画像を横に無限ループさせる方法(JavaScript)

let animationId = null;
let totalWidth = 0;
let pos = 0;
let speed = 0;

let isDragg = false;
let isDragging = false;
let dragStartX = 0;
let draggedX = 0;
let allowClick = true;


document.addEventListener('DOMContentLoaded', function() {

	const element = document.querySelector('.loop-img');

	// マウスイベントの設定
    element.addEventListener('mousedown', startDrag);
    element.addEventListener('mousemove', drag);
    element.addEventListener('mouseup', endDrag);
    element.addEventListener('mouseleave', endDrag);
    
	// タッチイベントの設定
	element.addEventListener('touchstart', startDrag);
	element.addEventListener('touchmove', drag);
	element.addEventListener('touchend', endDrag);
	element.addEventListener('touchcancel', endDrag);
	
	// 画像ループ処理
    loop();
});

//----------------------------------------------------------
// 　ループ処理
//----------------------------------------------------------
function loop() {
    if (!isDragging) {

	const element = document.querySelector('.loop-img');
	const items = document.querySelectorAll('.loop-img-item');

    initializeSpeed();
    calculateTotalWidth();

    pos -= speed;

    if (pos <= -totalWidth / 2) {
        let protrude = (-totalWidth / 2) - pos;
        pos = 0 + -protrude;
    }

    element.style.transform = `translateX(${pos}px)`;
}
    animationId = requestAnimationFrame(loop);
}


//----------------------------------------------------------
// 　Speedの初期化
//----------------------------------------------------------
function initializeSpeed() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        speed = 3;
    } else {
        speed = 2;
    }
}


//----------------------------------------------------------
// 　totalWidthの計算
//----------------------------------------------------------
function calculateTotalWidth() {
	const items = document.querySelectorAll('.loop-img-item');

    totalWidth = 0;
    
    items.forEach(item => {
        const style = getComputedStyle(item);
        const width = item.clientWidth;
        const marginLeft = parseFloat(style.marginLeft);
        const marginRight = parseFloat(style.marginRight);
        const paddingLeft = parseFloat(style.paddingLeft);
        const paddingRight = parseFloat(style.paddingRight);

        totalWidth += width + marginLeft + marginRight + paddingLeft + paddingRight;
    });
}

//----------------------------------------------------------
// 　Drag 開始処理
//----------------------------------------------------------
function startDrag(e) {
    isDragg = true;
    isDragging = false;
    allowClick = true;
    dragStartX = e.clientX || e.touches[0].clientX;
}

//----------------------------------------------------------
// 　Drag 中処理
//----------------------------------------------------------
function drag(e) {
    if (isDragg) {
    
    	isDragging = true;
    	allowClick = false;
    	
		const element = document.querySelector('.loop-img');
		const items = document.querySelectorAll('.loop-img-item');

		initializeSpeed();
		calculateTotalWidth();

		let client = e.clientX || e.touches[0].clientX;
		draggedX = client - dragStartX;
		dragStartX = client;
		pos += draggedX;
		

		if (pos <= -totalWidth / 2) {
			let protrude = (-totalWidth / 2) - pos;
			pos = 0 + -protrude;
		} else if( 0 <= pos ){
			let protrude = 0 + pos;
			pos = (-totalWidth / 2) + protrude;
		}
		

		element.style.transform = `translateX(${pos}px)`;
    
    }
}

//----------------------------------------------------------
// 　Drag 終了処理
//----------------------------------------------------------
function endDrag() {
	if( isDragging ) {
        allowClick = false;
	} else {
	    allowClick = true;
	}
	isDragg = false;
	isDragging = false;
}

<div class="loop-img-container">
<div class="loop-img">
<ul class="loop-img-list">
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/01.png" alt="振り向きねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-142" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/04.png" alt="寝そべりねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-143" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/01-1.png" alt="どすけべねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-144" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/07.png" alt="マリトッツォねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-145" /></li>
</ul>
<ul class="loop-img-list">
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/01.png" alt="振り向きねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-142" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/04.png" alt="寝そべりねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-143" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/01-1.png" alt="どすけべねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-144" /></li>
<li class="loop-img-item"><img src="/wp-content/uploads/2024/12/07.png" alt="マリトッツォねこちゃん" width="370" height="320" class="aligncenter size-full wp-image-145" /></li>
</ul>
</div>
</div>

img::active {
    cursor: grabbing !important;
}
.p-entry__body ul {
    margin-left: 0px;
}

.loop-img-container {
    overflow: hidden;
}

.loop-img {
	display: flex;
    will-change: transform;
}

.loop-img-list {
    display: flex;
    list-style: none;
    padding: 0;
    list-style-type: none !important;
    margin-left: initial;
    user-select: none;
}

.loop-img-item {
    width: calc(100vw / 4);
    margin: 0 10px;
    text-align: center;
    font-weight: 900;
}

.loop-img-item img {
    width: 100%;
    pointer-events: none; 
    user-select: none;
}