javascript - 如何让 slider 停止在最后一张幻灯片上

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 将位置设置为 0 解决了问题。这样，当我在第一张幻灯片上时，它就不会向左滚动。

但我不确定如何在上一张幻灯片上执行相同的操作。

Link to working exmaple

Answer 1

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

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>