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

【问题标题】：How to disable 'previous' and 'next' buttons in custom sliders?如何禁用自定义滑块中的“上一个”和“下一个”按钮？
【发布时间】：2021-04-11 08:30:23
【问题描述】：

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

这是我的源代码：

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

谢谢！

【问题讨论】：

@Spectric 我现在有了，谢谢。

标签： javascript html loops dom

【解决方案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--;
});

【讨论】：