Image gallery with horizontal scroll

CSS, Visual, Interactivity · May 1, 2022

Creates a horizontally scrollable image gallery.

  • Position the .thumbnails at the bottom of the container using position: absolute.
  • Use scroll-snap-type: x mandatory and overscroll-behavior-x: contain to create a snap effect on horizontal scroll. Snap elements to the start of the container using scroll-snap-align: start.
  • Hide scrollbars using scrollbar-width: none and styling the pseudo-element ::-webkit-scrollbar to display: none.
  • Use Element.scrollTo() to define a scrollToElement function, that scrolls the gallery to the given item.
  • Use and Array.prototype.join() to populate the .thumbnails element. Give each thumbnail a data-id attribute with the index of the image.
  • Use Document.querySelectorAll() to get all the thumbnail elements. Use Array.prototype.forEach() to register a handler for the 'click' event on each thumbnail, using EventTarget.addEventListener() and the scrollToElement function.
  • Use Document.querySelector() and EventTarget.addEventListener() to register a handler for the 'scroll' event. Update the .thumbnails element to match the current scroll position, using the highlightThumbnail function.
<div class="gallery-container">
  <div class="thumbnails"></div>
  <div class="slides">
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
.gallery-container {
  position: relative;
  display: flex;
  justify-content: center;

.thumbnails {
  position: absolute;
  bottom: 8px;
  display: flex;
  flex-direction: row;
  gap: 6px;

.thumbnails div {
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: #aaa;
  border-radius: 100%;

.thumbnails div.highlighted {
  background-color: #777;

.slides {
  margin: 0 16px;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  width: 540px;
  padding: 0 0.25rem;
  height: 720px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

.slides > div {
  scroll-snap-align: start;

.slides img {
  width: 540px;
  object-fit: contain;

.slides::-webkit-scrollbar {
  display: none;
const slideGallery = document.querySelector('.slides');
const slides = slideGallery.querySelectorAll('div');
const thumbnailContainer = document.querySelector('.thumbnails');
const slideCount = slides.length;
const slideWidth = 540;

const highlightThumbnail = () => {
    .forEach(el => el.classList.remove('highlighted'));
  const index = Math.floor(slideGallery.scrollLeft / slideWidth);

const scrollToElement = el => {
  const index = parseInt(, 10);
  slideGallery.scrollTo(index * slideWidth, 0);

thumbnailContainer.innerHTML += [...slides]
  .map((slide, i) => `<div data-id="${i}"></div>`)

thumbnailContainer.querySelectorAll('div').forEach(el => {
  el.addEventListener('click', () => scrollToElement(el));

slideGallery.addEventListener('scroll', e => highlightThumbnail());


More like this