香草JavaScript旋转木马 - 当没有更多幻灯片时如何停止

Question

我正在尝试构建一个简单的旋转木马。

每张幻灯片的宽度为25％ - 因此视口内总共会显示4张幻灯片。

到目前为止，我有：左边的幻灯片和右键，每次点击增加/减少transform: translateX 25％。这是为了将视图中的第一张/或最后一张幻灯片从视口中移出，并为下一张幻灯片腾出空间。

当没有更多幻灯片时，我无法理解如何让滑块停止移动。

我已经计算了slideList的总宽度，我想我需要做类似的事情：

“如果总滑动列表宽度已移过主容器的左侧或右侧，请禁用该方向的滑动按钮。”

编辑：我忘了提及，我总是希望视口内有4张幻灯片。因此，只要slideList的第一个或最后一个slideItem位于视口内，我希望它停止递增/递减25％。否则，slideList将被推出视口。

(function() {
	var slideList = document.querySelector(".slide-list");
	var slideItems = document.querySelectorAll(".slide-list li");
	var btnSlideLeft = document.querySelector(".btn-slide-left");
	var btnSlideRight = document.querySelector(".btn-slide-right");
	var numberOfSlides = slideItems.length;
	var totalSlideListWidth = slideList.getBoundingClientRect().width;
	var moveAmount = 25; // for translateX left / right
	var initial = 0;
	
	btnSlideLeft.addEventListener("click", function() {
		initial -= moveAmount;
		slideList.style.transform = "translateX(" + initial + "%)";
	});

	btnSlideRight.addEventListener("click", function() {
		initial += moveAmount;
		document.querySelector(".slide-list").style.transform =
			"translateX(" + initial + "%)";
	});
})();

.page-container {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.js-carousel {
	overflow: hidden;
	list-style: none;
    margin: 0 auto;
	max-width: 1000px;
	font-size: 0;
	white-space: nowrap;
}

.slide-list li {
	display: inline-block;
	height: 150px;
	width: 25%;
}

.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide-nav {
	padding: 2rem;
	margin: 1rem auto;
	max-width: 150px;
}
.btn {
	cursor: pointer;
	padding: 1rem 1.5rem;
	border: 0;
	margin-left: .25rem;
	margin-right: .25rem;
}

<div class="page-container">
	
	
	<div class="js-carousel">
   <ul class="slide-list">

    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--3.jpg" alt=""></li>
	   
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii-wallpaper-17.jpg" alt=""></li>

	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--6.jpg" alt=""></li>   
	   	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-7.jpg" alt=""></li>   
	   
	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-10.jpg" alt=""></li>   	   
	 	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-10.jpg" alt=""></li>    
	
   </ul>

<div class="slide-nav">
	<button class="btn btn-slide-left">Left</button>
<button class="btn btn-slide-right">Right</button>
</div>
</div>
</div>

Github上有许多轮播示例，但我找不到一个对我目前的JS技能水平来说足够简单的例子。

有人能给我一些建议吗？

谢谢：）

Answer 1

您需要使用变量来计算幻灯片编号，例如（{）currentSlide，当btnSlideLeft被阻止，幻灯片编号应该增加时，btnSlideRight会减少。接下来，您可以将此数字与幻灯片的最大数量（slidesItems.length）和最小值（0）进行比较，以隐藏或显示按钮。我改变了一些代码来展示基本想法并给你一个开始。

(function() {
	var slideList = document.querySelector(".slide-list");
	var slideItems = document.querySelectorAll(".slide-list li");
	var btnSlideLeft = document.querySelector(".btn-slide-left");
	var btnSlideRight = document.querySelector(".btn-slide-right");
	var numberOfSlides = slideItems.length;
	var totalSlideListWidth = slideList.getBoundingClientRect().width;
	var moveAmount = 25; // for translateX left / right
	var initial = 0;
  var currentSlide = 0; // New
	
	btnSlideLeft.addEventListener("click", function() {
		initial -= moveAmount;
		slideList.style.transform = "translateX(" + initial + "%)";
    /* New */
    currentSlide++;
    if(currentSlide == slideItems.length) {
      btnSlideLeft.style.display = "none";
    }
	});

	btnSlideRight.addEventListener("click", function() {
		initial += moveAmount;
		document.querySelector(".slide-list").style.transform =
			"translateX(" + initial + "%)";
      currentSlide--;
	});
})();

.page-container {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.js-carousel {
	overflow: hidden;
	list-style: none;
    margin: 0 auto;
	max-width: 1000px;
	font-size: 0;
	white-space: nowrap;
}

.slide-list li {
	display: inline-block;
	height: 150px;
	width: 25%;
}

.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide-nav {
	padding: 2rem;
	margin: 1rem auto;
	max-width: 150px;
}
.btn {
	cursor: pointer;
	padding: 1rem 1.5rem;
	border: 0;
	margin-left: .25rem;
	margin-right: .25rem;
}

<div class="page-container">
	
	
	<div class="js-carousel">
   <ul class="slide-list">

    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--3.jpg" alt=""></li>
	   
    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii-wallpaper-17.jpg" alt=""></li>

	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-park-iii--6.jpg" alt=""></li>   
	   	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-7.jpg" alt=""></li>   
	   
	   
	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-10.jpg" alt=""></li>   	   
	 	    <li><img class="image" src="https://wallscover.com/images/jurassic-world-wallpaper-10.jpg" alt=""></li>    
	
   </ul>

<div class="slide-nav">
	<button class="btn btn-slide-left">Left</button>
<button class="btn btn-slide-right">Right</button>
</div>
</div>
</div>