如何停止最后一張幻燈片上的滑塊

Question

我正在嘗試制作輪播，但在到達最后一張幻燈片時，我有點想阻止它滾動。

到目前為止，我有這個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將position設置為0來解決了這個問題。這樣，當我在第一張幻燈片上時，就不會向左滾動。

但是我不確定在上一張幻燈片上該如何做。

鏈接到工作實例

Answer 1

這就是您想要的，我剛剛添加了一個比較所有滑塊的位置和大小的測試。

 var width = 130; var carousel = document.getElementById('carousel'); var list = carousel.querySelector('ul'); var position = 0; var carouselwidth = document.getElementsByClassName('gallery')[0].offsetWidth; //number of silder var nbslider = list.getElementsByTagName("li").length; //number of silder per page var nbsliderp = carouselwidth / width console.log(nbsliderp); //size of silders per page var szsliderp = nbsliderp * width; carousel.querySelector('.prev').onclick = function() { position = Math.min(position + width, 0) console.log(position) list.style.marginLeft = position + 'px'; }; carousel.querySelector('.next').onclick = function() { //console.log((position - szsliderp) + (nbslider * width)) if (((position - szsliderp) + (nbslider * width)) > 0) { position = position - width //console.log(position) list.style.marginLeft = position + 'px'; } }; 

 body { padding: 10px; } .carousel { position: relative; width: 398px; padding: 10px 40px; background: #eee; } .carousel img { width: 130px; height: 130px; margin-right: 2px; display: block; } .arrow { position: absolute; top: 60px; padding: 0; font-size: 24px; line-height: 24px; color: #444; display: block; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } .prev { left: 7px; } .next { right: 7px; } .gallery { width: 390px; overflow: hidden; } .gallery ul { height: 130px; width: 9999px; margin: 0; padding: 0; list-style: none; transition: margin-left 250ms; font-size: 0; } .gallery li { display: inline-block; } 

 <div id="carousel" class="carousel"> <button class="arrow prev"></button> <div class="gallery"> <ul class="images"> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> <li><img src="https://cdn.houseplans.com/product/o2d2ui14afb1sov3cnslpummre/w1024.jpg?v=15"></li> </ul> </div> <button class="arrow next">></button> </div>