如何在自定义滑块中禁用'previous'和'next'按钮？

Question

我正在创建一个定制的水平滑块，但不太清楚如何在幻灯片开始时禁用"上一个"按钮，并在单击"下一个"后立即启用它，如果幻灯片容器到达第一张幻灯片，则再次禁用它？

这是我的源代码：

//slides container
const cardSliderContainer = document.querySelector('.js_card-slider-container');
// 'next' button
const sliderNextButton = document.querySelector('.js_card-slider-next');
// 'previous' button
const sliderPrevButton = document.querySelector('.js_card-slider-prev');
// slides within the container
const cardSliderSlides = document.getElementsByClassName('js_card-slider-slide');
const slides = Array.from(cardSliderSlides);
slides.forEach(function(slide, index) {
slide.setAttribute('index', index);
const slideIndex = slide.getAttribute('index');
if (slideIndex === 0) {
sliderPrevButton.classList.add('disabled');
};
});
sliderNextButton.addEventListener('click', function() {
cardSliderContainer.scrollLeft += 300;
});
sliderPrevButton.addEventListener('click', function() {
cardSliderContainer.scrollLeft -= 300;
});

HTML:

<div class='js_card-slider-container'>
<div class='js_card-slider-slide'>
slide 1
</div>
<div class='js_card-slider-slide'>
slide 2
</div>
<div class='js_card-slider-slide'>
slide 3
</div>
<div class='js_card-slider-slide'>
slide 4
</div>
<div class='js_card-slider-slide'>
slide 5
</div>

</div>
<div class='slider-buttons'>
<button class='js_card-slider-prev'>Previous</button>
<button class='js_card-slider-next'>Next</button>
</div>

谢谢！

Answer 1

无论何时单击按钮，都应该采取行动，而不是循环浏览幻灯片。检查一下这个样品，它有点粗糙，但你应该知道：

//initial index of the slide
var activeSlide = 0;
sliderNextButton.addEventListener('click', function() {
cardSliderContainer.scrollLeft += 300;
//Check if user has been moved to the last slide
if (activeSlide === slides.length-1) { 
//disable the button
sliderNextButton.classList.add('disabled');
} else {
//enable both buttons
sliderNextButton.classList.remove('disabled');
sliderPrevButton.classList.remove('disabled');
}
//increase active index
activeSlide++;
});
sliderPrevButton.addEventListener('click', function() {
cardSliderContainer.scrollLeft -= 300;
//Check if user has been moved to the first slide
if (activeSlide === 1) {
//disable the button
sliderPrevButton.classList.add('disabled');
} else {
//enable both buttons
sliderNextButton.classList.remove('disabled');
sliderPrevButton.classList.remove('disabled');
}
//decrease active index
activeSlide--;
});