JSFiddle - React, Tailwind, and code Playground

by ghost7492

HTML

<div class="all-wrap">
    <div class="imgSlider-wrap">
      <div class="imgSlider" id="imgSlider">
        <div class="img-wrap">
          <img class="imgSlider-img" src="https://pbs.twimg.com/media/DbUXRuzW4AAGj13.jpg" alt="">
        </div>
        <div class="img-wrap">
          <img class="imgSlider-img" src="http://bayleaf.me/wp-content/uploads/painting-techniques-best-25-acrylic-painting-techniques-ideas-on-pinterest-painting.jpg" alt="">
        </div>
        <div class="img-wrap">
          <img class="imgSlider-img" src="http://factsanddetails.com/media/2/20090807-National%20Musuem%20Tokyo%20screen%20from%2018th%20Ogata%20Korin%20C00503562.jpg" alt="">
        </div>
        <div class="img-wrap">
          <img class="imgSlider-img" src="http://webneel.com/daily/sites/default/files/images/daily/10-2013/13-tree-of-life-painting.jpg" alt="">
        </div>
      </div>
    </div>
    <div class="bar" id="bar" draggable="true"></div>
  </div>

CSS

.all-wrap {
  width: 400px;
  height: 300px;
  margin: 0 auto;
}

.imgSlider-wrap {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-bottom: 10px;
}

.imgSlider {
  width: 1000px;
  height: inherit;
  position: relative;
  right: 0px;
  display: grid;
  grid-auto-flow: column;
}

.imgSlider-img {
  height: 300px;
  width: 100%;
}

.bar {
  width: 100px;
  height: 10px;
  background: red;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}

JavaScript

const $bar = document.getElementById('bar')
const $imgSlider = document.getElementById('imgSlider')

const initPosition = {
  x: null,
}

$bar.addEventListener("dragstart", function (e) {
  if (initPosition.x === null) {
    initPosition.x = e.screenX
  }
  //drag時に表示されるイメージを消す。
  //https://stackoverflow.com/questions/27989602/hide-drag-preview-html-drag-and-drop?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
  var crt = this.cloneNode(true);
  crt.style.opacity = 0;
  document.body.appendChild(crt);
  e.dataTransfer.setDragImage(crt, 0, 0);
}, false);

$bar.addEventListener('drag', (e) => {
  if (e.screenX === 0) return
  const offset = e.screenX - initPosition.x
  $bar.style.left = `${offset}px`
  $imgSlider.style.right = `${offset}px`
})