Javascript 香草旋转木马&x2014；没有更多幻灯片时如何停止

我想建造一个简单的旋转木马

每张幻灯片的宽度为25%，因此视口内始终显示总共4张幻灯片

到目前为止，我已经有了：一个左右滑动按钮，它在每次点击时增加/减少

transform:translateX

25%。这是为了准确地将列表上的第一张/或最后一张幻灯片移出视口，并为下一张幻灯片腾出空间

当没有更多的幻灯片时，我不知道如何使滑块停止移动

我已经计算了slideList的总宽度，我想我需要做如下操作：

如果幻灯片列表总宽度已超过主容器的左侧或右侧，请禁用该方向的“幻灯片”按钮

编辑：我忘了提到，我总是希望视口中有4张幻灯片。所以，只要slideList的第一个或最后一个slideItem位于视口内，我希望它停止递增/递减25%。否则，幻灯片列表将被推出视口

（函数（）{
var slideList=document.querySelector（“.slideList”）；
var slideItems=document.queryselectoral（“.slidelist li”）；
var btnSlideLeft=document.querySelector（“.btn幻灯片左侧”）；
var btnSlideRight=document.querySelector（“.btn幻灯片右侧”）；
var numberOfSlides=slideItems.length；
var totalSlideListWidth=slideList.getBoundingClientRect（）.width；
var moveAmount=25；//用于translateX左/右
var初始值=0；
btnSlideLeft.addEventListener（“单击”，函数（）{
初始-=移动金额；
slideList.style.transform=“translateX（“+initial+”%）”；
});
btnSlideRight.addEventListener（“单击”，函数（）{
初始+=移动金额；
document.querySelector（“.slide list”）.style.transform=
“translateX（“+首字母+”）”；
});
})();
.page容器{
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.js旋转木马{
溢出：隐藏；
列表样式：无；
保证金：0自动；
最大宽度：1000px；
字号：0；
空白：nowrap；
}
.幻灯片列表李{
显示：内联块；
高度：150像素；
宽度：25%；
}
.形象{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.滑动导航{
填充：2rem；
保证金：1rem自动；
最大宽度：150px；
}
.btn{
光标：指针；
填充：1雷姆1.5雷姆；
边界：0；
左边缘：.25rem；
保证金权利：.25rem；
}









左边
赖特
您需要使用一个变量来计算幻灯片编号，如（例如）
currentSlide
，当点击
btnSlideLeft
时，幻灯片编号应该增加，而点击
btnSlideRight
则应该减少。接下来，您可以将此数字与幻灯片的最大数量（
slideItems.length
）和隐藏或显示按钮的最小值（0）进行比较。我对代码做了一些修改，以显示基本思想，并给您一个开始


（函数（）{
var slideList=document.querySelector（“.slideList”）；
var slideItems=document.queryselectoral（“.slidelist li”）；
var btnSlideLeft=document.querySelector（“.btn幻灯片左侧”）；
var btnSlideRight=document.querySelector（“.btn幻灯片右侧”）；
var numberOfSlides=slideItems.length；
var totalSlideListWidth=slideList.getBoundingClientRect（）.width；
var moveAmount=25；//用于translateX左/右
var初始值=0；
var currentSlide=0；//新建
btnSlideLeft.addEventListener（“单击”，函数（）{
初始-=移动金额；
slideList.style.transform=“translateX（“+initial+”%）”；
/*新的*/
currentSlide++；
如果（currentSlide==slideItems.length）{
btnSlideLeft.style.display=“无”；
}
});
btnSlideRight.addEventListener（“单击”，函数（）{
初始+=移动金额；
document.querySelector（“.slide list”）.style.transform=
“translateX（“+首字母+”）”；
当前幻灯片--；
});
})();
.page容器{
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.js旋转木马{
溢出：隐藏；
列表样式：无；
保证金：0自动；
最大宽度：1000px；
字号：0；
空白：nowrap；
}
.幻灯片列表李{
显示：内联块；
高度：150像素；
宽度：25%；
}
.形象{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.滑动导航{
填充：2rem；
保证金：1rem自动；
最大宽度：150px；
}
.btn{
光标：指针；
填充：1雷姆1.5雷姆；
边界：0；
左边缘：.25rem；
保证金权利：.25rem；
}









左边
赖特
非常感谢您，我理解您的代码，禁用btn功能非常有用。但我的主要问题是滑块完全移出窗口。当最后一张幻灯片从左侧或右侧进入窗口时（所以视口中始终有4张幻灯片），我需要一种方法来停止它。我可能把我最初的问题用词弄错了。我需要计算整个幻灯片列表的总宽度，然后找到一种方法来检测整个幻灯片列表何时移动到窗口左侧或右侧的边缘，这是错误的吗？