Javascript 如何在最后一张幻灯片上停止滑块

我正在试着制作一个旋转木马，但当到达最后一张幻灯片时，我一直在阻止它滚动

到目前为止，我有这个JS代码

var width = 130; //width of one slide
var position = 0;


var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');

carousel.querySelector('.prev').onclick = function() {
  position = Math.min(position + width, 0)
  console.log(position)
  list.style.marginLeft = position + 'px';
};

carousel.querySelector('.next').onclick = function() {
  position = position - width
  console.log(position)
  list.style.marginLeft = position + 'px';
};

所以我取一张幻灯片的宽度，并基于容器的变化幅度

向左滚动时，我通过使用

Math.min

将位置设置为

0

解决了问题。这样，当我在第一张幻灯片上时，它不会向左滚动

但我不知道在我的最后一张幻灯片上该怎么做

---

这是您想要的，我刚刚添加了一个测试，比较了所有滑块的位置和大小

var宽度=130；
var carousel=document.getElementById（'carousel'）；
var list=carousel.querySelector（'ul'）；
var位置=0；
var carouselwidth=document.getElementsByClassName（'gallery'）[0]。offsetWidth；
//条数
var nbslider=list.getElementsByTagName（“li”）.length；
//每页的贴片机数量
var nbsliderp=旋转木马宽度/宽度
控制台日志（nbsliderp）；
//每页窗台的尺寸
var szsliderp=nbsliderp*宽度；
carousel.querySelector（'.prev'）.onclick=function（）{
位置=数学最小值（位置+宽度，0）
控制台日志（位置）
list.style.marginLeft=位置+'px'；
};
carousel.querySelector（'.next'）.onclick=function（）{
//console.log（（位置-szsliderp）+（nbslider*width））
如果（（位置-szsliderp）+（nbslider*width））>0）{
位置=位置-宽度
//控制台日志（位置）
list.style.marginLeft=位置+'px'；
}
};
正文{
填充：10px；
}
旋转木马{
位置：相对位置；
宽度：398px；
填充：10px 40px；
背景：#eee；
}
.旋转木马{
宽度：130px；
高度：130像素；
右边距：2px；
显示：块；
}
.阿罗{
位置：绝对位置；
顶部：60px；
填充：0；
字体大小：24px；
线高：24px；
颜色：#444；
显示：块；
}
.箭头：焦点{
大纲：无；
}
.箭头：悬停{
背景：#ccc；
光标：指针；
}
上一篇{
左：7px；
}
.下一个{
右：7px；
}
.画廊{
宽度：390px；
溢出：隐藏；
}
美术馆{
高度：130像素；
宽度：9999px；
保证金：0；
填充：0；
列表样式：无；
过渡：边缘向左250ms；
字号：0；
}
李先生画廊{
显示：内联块；
}









>
这个答案可以解决您的问题：嗨！谢谢但我想知道是否有一种方法可以让它不依赖于一页上有多少张幻灯片。例如，我可以更改容器的宽度，使其仅显示两张幻灯片或一张幻灯片，并且它仍将滚动一张而不更改代码？@Allan检查编辑，我所做的只是将库宽度除以图片宽度，这样我就可以得到每页图片的数量很高兴为您提供帮助：）