JavaScript - 可拖动的画廊 slider

Question

我正在使用 function from W3Schools作为制作可拖动图库 slider 的起点(在我的代码中为 .slider-all-items)。从原始文件中删除了几行，以防止垂直拖动。
我正在努力实现 非常相似到这个jsfiddle example ，可拖动的幻灯片，以及:

总是 全屏 (.item { width: 100vw || 100% })

react 灵敏甚至在 window.resize

和 没有 无限模式(检查 jsfiddle 以上)。

添加了 3 张幻灯片，每张幻灯片占用 100%窗口(响应式)。

<div data-item="slider-full" class="slider-container">
    <div class="slider-all-items">
        <div class="slider-item slider-item1"></div>
        <div class="slider-item slider-item2"></div>
        <div class="slider-item slider-item3"></div>
    </div>
</div>

现在，我不需要无限模式，但在幻灯片之间切换的动画是 Draggable Slider 的一部分。
如果您尝试在 中拖动幻灯片(方向无关紧要) jsfiddle 只是几个例子 px它不会获得(下一张或上一张)幻灯片并将其居中，简而言之，该功能被阻止。
为 left 设置动画和 right .items ，我做了这样的事情:

/* If the user is dragging to -1 (no slide), it'll set the slider `left` to *0* */

if (sliderLeft >= 0) {theSlider.style.left = "0px";}

最后一个 .item 相同(滑动):

/* If dragging greater than the last one, set to the last with animation */
if (sliderRight <= sliderWidth) {theSlider.style.left = on the last item}

动画 - 过渡: property transition它的值 0.5s ease存储在 class命名为 .shifting .
如果两者中的任何一个(上述条件)是 true , .shifting class将添加到 Slider , 它会 transition: 0.5s (正如刚才提到的)。同时，一个 setTimeout() function, delay 0.5s将被执行，这将添加和删除它。 (延迟是为了平衡 transition 在删除 class 之前完全完成所需的时间)。重要的是要提到 class .shifting应移除以保持阻力快速平稳。简而言之:它将具有 class仅在行动中(当鼠标空闲时)。

.shifting{
    transition: all 0.5s ease;
} 

我想要达到的目标:
使幻灯片可拖动(全屏 - 响应式 - 没有无限模式)，并且:
如果阻力只有 X(small number)px防止它(如 jsfiddle - 使用 .shifting 和我的代码)。
如果超过 X(greater than the x before)px ，获取要求的幻灯片并将其居中。
现场(类似)示例:
编辑:您必须登录才能看到它，抱歉没有注意到并且找不到另一个示例

Fiverr - 向下滚动并检查横幅( slider )。忽略无限模式和导航点。

我尝试过的事情:

使用 for和 forEach loops获取 items但无法在它们和 theSlider.style.left 之间建立联系.

试过jsfiddle example上面有一些更改( set to full screen )，它可以工作，但问题出在 window.resize它出现故障，需要刷新页面以使其按预期工作。

刷新特定内容在 页面和 不是 页面本身(不重新加载)，使用 JavaScript或 jQuery没用。

当刷新页面中的内容不起作用时，我想到了使用 jsfiddle 上面提到的改变了 width和 height至 100% and 100vh, and on window.resize` 获取当前幻灯片索引，删除 slider ，然后将其再次附加到存储的索引中，但有时可能会出现故障，因此决定坚持使用我的代码，问题是:
如何在幻灯片之间连接以使 slider 按要求工作？
我的代码:

// get the slider
var theSlider = document.querySelector(".slider-all-items");
// get the items in the slider
var sliderItem = document.querySelectorAll('.slider-item');

// variables saved for later
var sliderWidth;
var sliderRight;

// run the function
dragElement(theSlider);


function dragElement(theSlider) {
    var pos1 = 0, pos3 = 0;
    theSlider.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos3 = e.clientX;

        // set the element's new position:
        theSlider.style.left = (theSlider.offsetLeft - pos1) + "px";
    }
    
    function closeDragElement() {
        // add the class .shifting to the slider for every css change (transition)
        theSlider.classList.add("shifting");
        
        // get each item width
        sliderWidth = theSlider.getBoundingClientRect().width  / sliderItem.length;
        // get the right side position of the slider
        sliderRight = theSlider.getBoundingClientRect().right;
        // get the left side position of the slider
        sliderLeft = theSlider.getBoundingClientRect().left;

        if(sliderLeft >= 0){
            theSlider.style.left = "0px";
        }

        if(sliderRight <= sliderWidth){            
            theSlider.style.left =  -Math.abs((sliderWidth * sliderItem.length) - sliderWidth) + "px";
        }
        
        // delay 0.5s, then remove the class .shifting when finished checking and styling
        // .shifting {transition: all 0.5s ease;}
        setTimeout(() => {
            theSlider.classList.remove("shifting");
        }, 500);

        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

*, *:before, *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

.slider-container {
    position: relative;
    height: 80vh;
    overflow-x: scroll;
    overflow-y: hidden;
}

.slider-container::-webkit-scrollbar {
    display: none !important;
}

.slider-all-items {
    position: absolute;
    display: inline-flex;    
}

.slider-item {
    width: calc(100vw - 0px);
    height: 80vh;
    cursor: grab;
    display: block;
}

.slider-item1 {
    background: red;
}

.slider-item2 {
    background-color: blue;
}

.slider-item3 {
    background-color: yellow;
}

.shifting{
    transition: all 0.5s ease;
}

<div data-item="slider-full" class="slider-container">
    <div class="slider-all-items">
        <div class="slider-item slider-item1"></div>
        <div class="slider-item slider-item2"></div>
        <div class="slider-item slider-item3"></div>
    </div>
</div>

Answer 1

我相信我们可以消除故障并实现等宽的 div( slider 项)，因为您已经使用了全屏 = 宽度 100%)而无需重新加载。
只需使用 ResizeObserver :我相信我们所要做的就是在调整窗口大小时调用“closeDragElement”函数，因为这是计算 slider 大小的唯一函数。
ResizeObserver 的 CDN .
代码

        // get the slider
        var theSlider = document.querySelector(".slider-all-items");
        // get the items in the slider
        var sliderItem = document.querySelectorAll('.slider-item');

        // variables saved for later
        var sliderWidth;
        var sliderRight;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos3 = e.clientX;

            // set the element's new position:
            theSlider.style.left = (theSlider.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            // get each item width
            sliderWidth = theSlider.getBoundingClientRect().width / sliderItem.length;
            // get the right side position of the slider
            sliderRight = theSlider.getBoundingClientRect().right;
            // get the left side position of the slider
            sliderLeft = theSlider.getBoundingClientRect().left;

            if (sliderLeft >= 0) {
                theSlider.style.left = "0px";
            }

            if (sliderRight <= sliderWidth) {
                theSlider.style.left = -Math.abs((sliderWidth * sliderItem.length) - sliderWidth) + "px";
            }
            // stop moving when mouse button is released:
            document.onmouseup = null;
            document.onmousemove = null;
        }

        function dragElement(theSlider) {
            var pos1 = 0, pos3 = 0;
            theSlider.onmousedown = dragMouseDown;
            theSlider.addEventListener('resize', closeDragElement);
        }

        dragElement(theSlider);

        /* global ResizeObserver */

        const ro = new ResizeObserver(entries => {
            for (let entry of entries) {
                closeDragElement();
            }
        });

        ro.observe(theSlider); //<-- NOTICE HERE

*,
        *:before,
        *:after {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .slider-container {
            position: relative;
            height: 80vh;
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .slider-container::-webkit-scrollbar {
            display: none !important;
        }

        .slider-all-items {
            position: absolute;
            display: inline-flex;
        }

        .slider-item {
            width: calc(100vw - 0px);
            height: 80vh;
            cursor: grab;
            display: block;
        }

        .slider-item1 {
            background: red;
        }

        .slider-item2 {
            background-color: blue;
        }

        .slider-item3 {
            background-color: yellow;
        }

        .shifting {
            transition: all 0.5s ease;
        }

<div data-item="slider-full" class="slider-container">
        <div class="slider-all-items">
            <div class="slider-item slider-item1"></div>
            <div class="slider-item slider-item2"></div>
            <div class="slider-item slider-item3"></div>
        </div>
    </div>

前:
https://www.dropbox.com/s/y0oy4rwnlj5la4g/before.gif?dl=0
后:
https://www.dropbox.com/s/jsqba0ef61ibef1/after.gif?dl=0