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.
预览
HTML
<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>
CSS
.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;
}
JavaScript
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();
翻译自:https://www.30secondsofcode.org/css/s/horizontal-gallery