JavaScript滑块工作不正常

我试图制作一个滑块，但遇到了一个问题：

slideWidth

变量（即幻灯片的宽度）总是相同的，因此当它到达第二张幻灯片时，它不想再进一步，与前一张幻灯片类似，由于变量值固定，它会滑到空白处它不想设置动画。 如何解决此问题？

请查看代码：

//滑块
const slider_wrapp=document.querySelector（“.tract slider”）；
常量滑块=document.querySelector（'.tract slider wrapp'）；
var slide=document.getElementsByClassName（'tract-slide'）；
const leftBtn=document.querySelector（'.slide left'）；
const rightbn=document.querySelector（'.slide right'）；
设swWidth=slider_wrapp.clientWidth；
设sliderWidth=swWidth*slide.length；
设slideWidth=swWidth；
slider.style.width=sliderWidth+“px”；
对于（变量i=0；i
.tract滑块{
宽度：100%；
高度：75vh；
位置：相对位置；
溢出：隐藏；
}
.牵引滑块包装{
身高：100%；
位置：相对位置；
-webkit转换：转换350ms立方贝塞尔（.08,13,0,81）；
-o形过渡：平移350ms立方贝塞尔（.08,13,0,81）；
转换：转换350ms立方贝塞尔（.08,13,0,81）；
}
.滑道{
身高：100%；
浮动：左；
位置：相对位置；
显示：块；
背景位置：中心；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
.滑道：第n个孩子（1）{
背景图像：url（“https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}
.滑道：第n个孩子（2）{
背景图像：url（“https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}
.滑道：第n个孩子（3）{
背景图像：url（“https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}
.拖拉机滑杆控制{
位置：绝对位置；
左：0；
底部：0；
背景：#ffffff；
填充：1em；
}
.btn{
显示：内联块；
光标：指针；
左边距：1米；
}
.btn：第n个子项（1）{
左边距：0；
}

上
下一个
您的问题是您没有计算幻灯片包装器的
translateX
位置：（幻灯片宽度
var）

要修复它，您必须检查并指定一个新的计算值，而不是将其始终设置为滑块宽度

请注意，我在
moveRight（）
和
moveLeft（）

请参阅下面的工作片段：（仅使用js）


//滑块
const slider_wrapp=document.querySelector（“.tract slider”）；
常量滑块=document.querySelector（'.tract slider wrapp'）；
var slide=document.getElementsByClassName（'tract-slide'）；
const leftBtn=document.querySelector（'.slide left'）；
const rightbn=document.querySelector（'.slide right'）；
设swWidth=slider_wrapp.clientWidth；
设sliderWidth=swWidth*slide.length；
设滑动宽度=0；
slider.style.width=sliderWidth+“px”；
对于（变量i=0；i
.tract滑块{
宽度：100%；
高度：75vh；
位置：相对位置；
溢出：隐藏；
}
.牵引滑块包装{
身高：100%；
位置：相对位置；
-webkit转换：所有350ms立方贝塞尔（.08,13,0,81）；
-o型过渡：所有350ms立方贝塞尔（.08,13,0,81）；
过渡：所有350ms立方贝塞尔（.08,13,0,81）；
}
.滑道{
身高：100%；
浮动：左；
位置：相对位置；
显示：块；
背景位置：中心；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
.滑道：第n个孩子（1）{
背景图像：url（“https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}
.滑道：第n个孩子（2）{
背景图像：url（“https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}
.滑道：第n个孩子（3）{
背景图像：url（“https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}
.拖拉机滑杆控制{
位置：绝对位置；
左：0；
底部：0；
背景：#ffffff；
填充：1em；
}
.btn{
显示：内联块；
光标：指针；
左边距：1米；
}
.btn：第n个子项（1）{
左边距：0；
}

上
下一个
这太棒了！非常感谢，还有一件事，我能做些什么使它成为动画呢？哦，我在css转换属性中使用了translate而不是transform，现在可以了……）很抱歉再次打扰您，您是否知道如何修复它，以便在我单击第三张幻灯片上的“下一张”后，它不会跳到第一张幻灯片，而是从右向左设置动画，就像它将是第三张幻灯片之后的下一张幻灯片一样。我认为可以使用appendChild和insertBefore来完成，但我想不出来。我会看看如何解决这个问题，我认为所有的解决方案都可能改变！很抱歉，我只是尝试用translate来修复它，但它似乎有点棘手，需要很多时间，我会在有更多时间时处理它：）