<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;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.