Blog Post

Създаване на хоризонтално превъртаща се галерия с изображения.

май 8, 2023 HTML5/CSS3, Web Програмиране, Интернет by toni

Използвайте 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 функцията.

<!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>

.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;
}

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();

ВИЖ ДЕМО