如何使用 vanilla js 创建无限拖动滑块

Question

嗨，我在创建无限滚动/拖动滑块时遇到问题。滚动按预期工作并继续循环，但是，如果我拖动滑块，它不会继续循环。任何帮助将不胜感激，我是 javascript 新手，我想在我的网站上实现这种类型的滑块。

这里是 jsfiddle：https://jsfiddle.net/m0c85zrt/

"use strict";

let sliderWrap = document.querySelector('.slider_wrap');
let slider = document.querySelector('.slider');
let clonesWidth;
let sliderWidth;
let clones = [];
let disableScroll = false;
let scrollPos;

let items = [...document.querySelectorAll('.slider_item')];
let images = [...document.querySelectorAll('.image_div')];


let pressed = false;
let startx;
let x;


images.forEach((image, idx) => {
    image.style.backgroundImage = `url(/images/${idx + 1}.jpg)`
});

items.forEach(item => {
    let clone = item.cloneNode(true);
    clone.classList.add('clone');
    slider.appendChild(clone);
    clones.push(clone);
});
function getClonesWidth() {
    let width = 0;
    clones.forEach(clone => {
        width += clone.offsetWidth;
    })
    return width;
}

function getScrollPos() {
    return window.scrollY;
}
function setScrollPos(pos) {
    window.scrollTo({ top: pos })
}
function scrollUpdate() {
    scrollPos = getScrollPos();
    if (clonesWidth + scrollPos >= sliderWidth) {
        window.scrollTo({ top: 1 });
    } else if (scrollPos <= 0) {
        window.scrollTo({ top: sliderWidth - clonesWidth - 1 })
    }
    slider.style.transform = `translateX(${-window.scrollY}px)`

    requestAnimationFrame(scrollUpdate)
}

function onLoad() {
    calculateDimensions()
    document.body.style.height = `${sliderWidth}px`
    window.scrollTo({ top: 1 });
    scrollUpdate();
}

function calculateDimensions() {
    sliderWidth = slider.getBoundingClientRect().width;
    clonesWidth = getClonesWidth();
}
sliderWrap.addEventListener('mousedown', (e) => {
    pressed = true;
    startx = e.offsetX - slider.offsetLeft;
    sliderWrap.style.cursor = "grabbing";
});

sliderWrap.addEventListener('mouseenter', () => {
    sliderWrap.style.cursor = "grab";
});

slider.addEventListener('mouseleave', () => {
    slider.style.cursor = 'default'
})

sliderWrap.addEventListener('mouseup', () => {
    sliderWrap.style.cursor = 'grab';
})
sliderWrap.addEventListener('mouseup', () => {
    pressed = false;
});
sliderWrap.addEventListener('mousemove', (e) => {
    if (!pressed) return;
    e.preventDefault();

    x = e.offsetX;
    if (x + startx >= sliderWidth) {
        x = e.offsetX;
    }
    slider.style.left = `${x - startx}px`;

})
onLoad();