<ul class="gallery">
	<li style="background: #f6bd60;"></li>
	<li style="background: #f7ede2;"></li>
	<li style="background: #f5cac3;"></li>
	<li style="background: #84a59d;"></li>
	<li style="background: #f28482;"></li>
</ul>
.gallery {
	padding: 1rem;
	display: grid;
	grid-template-columns: repeat(10, 80vw);
	grid-template-rows: 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: scroll;
	height: 90vh;
	scroll-snap-type: both mandatory;
	scroll-padding: 1rem;
}

.active {
	scroll-snap-type: unset;
}

li {
	scroll-snap-align: center;
	display: inline-block;
	border-radius: 3px;
	font-size: 0;
}
const slider = document.querySelector('.gallery');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', e => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', _ => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mouseup', _ => {
  isDown = false;
  slider.classList.remove('active');
});
slider.addEventListener('mousemove', e => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const SCROLL_SPEED = 3;
  const walk = (x - startX) * SCROLL_SPEED;
  slider.scrollLeft = scrollLeft - walk;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.