Javascript 如何禁用'；以前的'；和'；下一个'；自定义滑块中的按钮？

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

以下是我的源代码：

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

幻灯片1
幻灯片2
幻灯片3
幻灯片4
幻灯片5
以前的
下一个

---

谢谢

单击按钮时，您应该采取行动，而不是循环浏览幻灯片。查看此示例，虽然有点粗糙，但您应该了解：

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

---

@我现在有了，谢谢。

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