Horizontal Scroll

horizontal-scroll.css

.wrap {
  display: flex;
  justify-content: flex-start;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  cursor: grab;
}
.wrap::-webkit-scrollbar {
  display: none;
}
.wrap > li {
  flex: 0 0 auto;
  width: 200px;
  list-style: none;
}
.wrap > li > img {
  width: 100%;
}

horizontal-scroll.html

<ul class="wrap>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
  <li><img src="https://picsum.photos/200/300" /></li>
</ul>

horizontal-scroll.js

const slider = document.querySelector('ul.wrap')
let isDown = false
let startX
let scrollLeft

slider.addEventListener('mousedown', (e) => {
    isDown = true
    slider.style.cursor = 'grabbing'
    startX = e.pageX - slider.offsetLeft
    scrollLeft = slider.scrollLeft
});
slider.addEventListener('mouseleave', () => {
    isDown = false
    slider.style.cursor = 'grab'
});
slider.addEventListener('mouseup', () => {
    isDown = false
    slider.style.cursor = 'grab'
});
slider.addEventListener('mousemove', (e) => {
    if(!isDown) return
    e.preventDefault()
    const x = e.pageX - slider.offsetLeft
    const walk = (x - startX) * 2
    slider.scrollLeft = scrollLeft - walk
});