Slider

by kthornbloom

HTML

<div class="wrapper">
  <a href="#" class="btn prev">back</a>
  <div class="slider">
    <div class="items">  
      <div class="item">
        Item a 
      </div>
      <div class="item">
        Item b
      </div>
      <div class="item">
        Item c
      </div>
      <div class="item">
        Item d
      </div>
      <div class="item">
        Item e
      </div>
      <div class="item">
        Item f
      </div>
      <div class="item">
        Item g
      </div>
      <div class="item">
        Item h
      </div>
      <div class="item">
        Item i 
      </div>
      <div class="item">
        Item j
      </div>
    </div>
  </div>
  <a href="#" class="btn next">forward</a>
</div>

<div class="wrapper">
  <a href="#" class="btn prev">back</a>
  <div class="slider">
    <div class="items">  
      <div class="item">
        Item a 
      </div>
      <div class="item">
        Item b
      </div>
    </div>
  </div>
  <a href="#" class="btn next">forward</a>
</div>

CSS

.wrapper {
  display: flex;
}

.item {
  border: 2px solid #ccc;
  height: 50px;
  width: 200px;
  min-width: 50px;
  display: inline-block;
}

.slider {
  overflow: auto;
  display: flex;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.scrollDisabled {
  opacity: 0.2;
  pointer-events: none;
}

.btn {
  width: 30px;
  background: #eee;
}

JavaScript

var allNext = document.querySelectorAll('.next');
var allPrev = document.querySelectorAll('.prev');
var i = '';
const sliders = document.querySelectorAll('.wrapper');

function checkSliders() {
  for (var i = 0; i < sliders.length; i++) {
    var el = sliders[i];
    arrowHider(el);
    arrowDisabler(el);
  }
}

var sliderWindowResize
window.addEventListener('resize', function() {
  clearTimeout(sliderWindowResize);
  sliderWindowResize = setTimeout(function() {
    checkSliders();
  }, 250);
});

function arrowDisabler(el) {
  setTimeout(function() {
    var slideItems = el.querySelector('.items'),
      slideContainer = el.querySelector('.slider'),
      slidePrev = el.querySelector('.prev'),
      slideNext = el.querySelector('.next');
    slideNext.classList.remove('scrollDisabled');
    slidePrev.classList.remove('scrollDisabled');
    if ((slideContainer.scrollLeft + slideContainer.offsetWidth) >= slideItems.offsetWidth) {
      slideNext.classList.add('scrollDisabled');
    } else if (slideContainer.scrollLeft == 0) {
      slidePrev.classList.add('scrollDisabled');
    }
  }, 500);
}

function arrowHider(el) {
  var slideItems = el.querySelector('.items'),
    slideContainer = el.querySelector('.slider'),
    slidePrev = el.querySelector('.prev'),
    slideNext = el.querySelector('.next');
  if (slideItems.offsetWidth > slideContainer.offsetWidth) {
    slidePrev.style.display = "block";
    slideNext.style.display = "block";
  } else {
    slidePrev.style.display = "none";
    slideNext.style.display = "none";
  }
}

checkSliders();


allNext.forEach(el => el.addEventListener('click', e => {
  var slideItems = e.target.parentElement.querySelector('.items'),
    slideContainer = e.target.parentElement.querySelector('.slider');

  if (slideItems.offsetWidth > slideContainer.offsetWidth) {
    slideContainer.scrollLeft += slideContainer.offsetWidth;
  }
  arrowDisabler(e.target.parentElement);

}))

allPrev.forEach(el => el.addEventListener('click', e => {
...