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

debugcn 发表于 Dev

基拉

我正在尝试制作一个旋转木马，但在到达最后一张幻灯片时，我有点想阻止它滚动。

到目前为止我有这个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';
};

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

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

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

链接到工作示例

苏尔塔尼根治

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。