JavaScript可拖动滑块

我使用了一个可拖动的滑块（

.slider我的代码上的所有项目

）。
由于我必须防止在画廊幻灯片中垂直拖动，所以删除了几行。

我正试图实现这样的效果，一个可拖动的幻灯片，但即使在

窗口上也能响应的要求。调整大小
，始终打开
全屏（项目宽度：100vw或100%）
和不使用无限模式。



我想通过检查sliderLeft>=0来获取第一个
项
，如果为真，则设置
theSlider.style.left=“0px”
。最后一个
项目
通过检查是否
sliderRight我相信我们可以消除这个问题，并实现等宽的div（滑块项目），因为您已经使用了全屏=宽度100%），而无需重新加载

只需使用：我相信我们所要做的就是在窗口调整大小时调用“CloseDrageElement”函数，因为这是计算滑块大小的唯一函数

CDN用于

代码


//获取滑块
var theSlider=document.querySelector（“.slider-all-items”）；
//获取滑块中的项目
var sliderItem=document.querySelectorAll（'.sliderItem'）；
//为以后保存的变量
滑动宽度；
var滑灯；
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos3=e.clientX；
//设置元素的新位置：
slider.style.left=（slider.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
//获取每个项目的宽度
sliderWidth=slider.getBoundingClientRect（）.width/sliderItem.length；
//获取滑块的右侧位置
sliderRight=slider.getBoundingClientRect（）右侧；
//获取滑块的左侧位置
sliderLeft=slider.getBoundingClientRect（）.left；
如果（滑块左侧>=0）{
滑块。style.left=“0px”；
}
如果（滑动灯光）{
for（让条目的输入）{
闭式牵引装置（）；
}
});
ro.observe（theSlider）；//你能提供关于你试图达到的效果的更具体的细节吗？我很想提供帮助，但不清楚你想在代码的行为上改进什么。你指定你的目标是“即使在窗口上也响应。调整大小，始终在全屏上（项目宽度：100vw或100%）没有无限模式。”。但是，它已经在窗口调整大小时调整大小，始终为容器宽度的100%，并且没有无限滚动。我看不出缺少什么。另外，我不理解刷新屏幕部分的特定内容的意思。如何做到这一点？@noamgaash检查jsfiddle示例please@Eureka检查JSFIDLE示例请注意，我正在尝试实现与示例类似的功能，但没有无限模式。尝试了相同的示例并进行了一些更改（全屏-宽度100%），但在调整窗口大小时出现了一个小问题。小问题是我在调整窗口大小时全屏尝试了问题中的JSFIDLE示例。我正在尝试的是一个可拖动的图库幻灯片。在拖动时在
项
之间切换，请检查JSFIDLE示例。您能添加一个您正在谈论的小问题的gif吗bout？我刚刚添加了一个gif（在dropbox上），显示了我在您共享的代码中看到的问题。