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

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';
};

所以我正在调整一张幻灯片的宽度并根据容器的更改边距。

当向左滚动时，我通过0将位置设置为Math.min来解决问题。这样，当我在第一张幻灯片上时，它不会向左滚动。

但是我不知道在上一张幻灯片上如何做同样的事情。

Link to working exmaple

Answer 1

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

＆＃13;

＆＃13;

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';
  }
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;