Създава хоризонтално превъртаща се галерия с изображения.
- Използвайте
display: flexи ,justify-content:center за да настроите оформлението на контейнера. - Използвайте
display: flexи ,flex-direction:column за да настроите оформлението на слайдовете. - Използвайте
scroll-snap-type: y mandatoryи ,overscroll-behavior-y: containза да създадете ефект на щракане при вертикално превъртане. Прикрепете елементи към началото на контейнера с помощта наscroll-snap-align: start. - Скрийте лентите за превъртане, като използвате
scrollbar-width: noneи оформите псевдоелемента::-webkit-scrollbarдо display: none. - Използвайте
Element.scrollTo(), за да дефиниратеscrollToElementфункция, която превърта галерията до дадения елемент. - Използвайте
Array.prototype.map()иArray.prototype.join()за попълване на.thumbnailsелемента. Дайте на всяка миниатюраdata-idатрибут с индекса на изображението. - Използвайте
Document.querySelectorAll(), за да получите всички миниатюрни елементи. ИзползвайтеArray.prototype.forEach(), за да регистрирате манипулатор за'click'събитието на всяка миниатюра, като използватеEventTarget.addEventListener()иscrollToElementфункцията. - Използвайте
Document.querySelector()и ,EventTarget.addEventListener()за да регистрирате манипулатор за'scroll'събитието. Актуализирайте елементите.thumbnailsи.scrollbar, за да съответстват на текущата позиция на превъртане, като използватеscrollThumbфункцията.
HTML:
<!DOCTYPE HTML>
<!--
Toni Angelchovski HTML5
angelchovski.com |@bgwelding
-->
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div><h1><center>DT GARAGE Handmade</center></h1></div>
<div class="gallery-container">
<div class="thumbnails"></div>
<div class="scrollbar">
<div class="thumb"></div>
</div>
<div class="slides">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
.gallery-container {
display: flex;
justify-content: center;
}
.thumbnails {
display: flex;
flex-direction: column;
gap: 8px;
}
.thumbnails img {
width: 40px;
height: 40px;
cursor: pointer;
}
.scrollbar {
width: 1px;
height: 720px;
background: #ccc;
display: block;
margin: 0 0 0 8px;
}
.thumb {
width: 1px;
position: absolute;
height: 0;
background: #000;
}
.slides {
margin: 0 16px;
display: grid;
grid-auto-flow: row;
gap: 1rem;
width: calc(540px + 1rem);
padding: 0 0.25rem;
height: 720px;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y 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 scrollbarThumb = document.querySelector('.thumb');
const slideCount = slides.length;
const slideHeight = 720;
const marginTop = 16;
const scrollThumb = () => {
const index = Math.floor(slideGallery.scrollTop / slideHeight);
scrollbarThumb.style.height = `${((index + 1) / slideCount) * slideHeight}px`;
};
const scrollToElement = el => {
const index = parseInt(el.dataset.id, 10);
slideGallery.scrollTo(0, index * slideHeight + marginTop);
};
document.querySelector('.thumbnails').innerHTML += [...slides]
.map(
(slide, i) => `<img src="${slide.querySelector('img').src}" data-id="${i}">`
)
.join('');
document.querySelectorAll('.thumbnails img').forEach(el => {
el.addEventListener('click', () => scrollToElement(el));
});
slideGallery.addEventListener('scroll', e => scrollThumb());
scrollThumb();
Last edited:
