如何禁用自定义滑块中的“上一个”和“下一个”按钮？

Question

我正在创建一个定制的水平 slider 并且无法完全弄清楚如何在幻灯片开头禁用“上一个”按钮并在单击“下一个”按钮后立即启用它，如果幻灯片再次禁用它容器到达第一张幻灯片？

这是我的源代码：

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