Image gallery with horizontal scroll
Creates a horizontally scrollable image gallery.
- Position the
.thumbnails
at the bottom of the container usingposition: absolute
. - Use
scroll-snap-type: x mandatory
andoverscroll-behavior-x: contain
to create a snap effect on horizontal scroll. Snap elements to the start of the container usingscroll-snap-align: start
. - Hide scrollbars using
scrollbar-width: none
and styling the pseudo-element::-webkit-scrollbar
todisplay: none
. - Use
Element.scrollTo()
to define ascrollToElement
function, that scrolls the gallery to the given item. - Use
Array.prototype.map()
andArray.prototype.join()
to populate the.thumbnails
element. Give each thumbnail adata-id
attribute with the index of the image. - Use
Document.querySelectorAll()
to get all the thumbnail elements. UseArray.prototype.forEach()
to register a handler for the'click'
event on each thumbnail, usingEventTarget.addEventListener()
and thescrollToElement
function. - Use
Document.querySelector()
andEventTarget.addEventListener()
to register a handler for the'scroll'
event. Update the.thumbnails
element to match the current scroll position, using thehighlightThumbnail
function.
<div class="gallery-container"> <div class="thumbnails"></div> <div class="slides"> <div><img src="https://picsum.photos/id/1067/540/720"></div> <div><img src="https://picsum.photos/id/122/540/720"></div> <div><img src="https://picsum.photos/id/188/540/720"></div> <div><img src="https://picsum.photos/id/249/540/720"></div> <div><img src="https://picsum.photos/id/257/540/720"></div> <div><img src="https://picsum.photos/id/259/540/720"></div> <div><img src="https://picsum.photos/id/283/540/720"></div> <div><img src="https://picsum.photos/id/288/540/720"></div> <div><img src="https://picsum.photos/id/299/540/720"></div> </div> </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 = () => { thumbnailContainer .querySelectorAll('div.highlighted') .forEach(el => el.classList.remove('highlighted')); const index = Math.floor(slideGallery.scrollLeft / slideWidth); thumbnailContainer .querySelector(`div[data-id="${index}"]`) .classList.add('highlighted'); }; const scrollToElement = el => { const index = parseInt(el.dataset.id, 10); slideGallery.scrollTo(index * slideWidth, 0); }; thumbnailContainer.innerHTML += [...slides] .map((slide, i) => `<div data-id="${i}"></div>`) .join(''); thumbnailContainer.querySelectorAll('div').forEach(el => { el.addEventListener('click', () => scrollToElement(el)); }); slideGallery.addEventListener('scroll', e => highlightThumbnail()); highlightThumbnail();