JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<div class="slider">
  <div class="slider-list">
    <div class="slider-track">
      <div class="slide">1</div>
      <div class="slide">2</div>
      <div class="slide">3</div>
      <div class="slide">4</div>
      <div class="slide">5</div>
    </div>
  </div>
  <div class="slider-arrows">
    <button type="button" class="prev">&larr;</button>
    <button type="button" class="next">&rarr;</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
.slider {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
  user-select: none;
  touch-action: pan-y;
}

.slider img {
  poiner-events: none;
}

.slider-list {
  width: 200px;
  height: 200px;
      overflow: overlay;
}

.slider-list.grab {
  cursor: grab;
}

.slider-list.grabbing{
  cursor: grabbing;
}

.slider-track {
  display: flex;
}

.slide {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

.slider-arrows {
  margin-top: 15px;
  text-align: center;
}

.next,
.prev {
  background: none;
  border: none;
  margin: 0 10px;
  font-size: 30px;
  cursor: pointer;
}

.next.disabled,
.prev.disabled {
  opacity: .25;
  pointer-events: none;
}

JavaScript

let thumb = document.querySelector('.slider-track');
let slider = document.querySelector('.slider-list');
let ismousedown=false;

function shift(event){
 
  if(ismousedown) {
  debugger
    let newLeft = event.clientX - thumb.getBoundingClientRect().width ;
      if (newLeft < 0) {
          newLeft = 0;
        }
        let rightEdge = slider.offsetWidth - thumb.offsetWidth;
        if (newLeft > rightEdge) {
          newLeft = rightEdge;
        }
   // thumb.style.left = newLeft + 'px'; 
        thumb.style.transform = `translate3d(-${newLeft + 'px'}, 0px, 0px)`;
 }
}

function dfg(){
 ismousedown=true;
}
function sdf(){
ismousedown=false;
}


slider.addEventListener('mousemove', shift);
thumb.addEventListener('mousedown', dfg);
document.addEventListener('mouseup',sdf);