В этом проекте мы реализуем красивую галерею на примере направлений путешествий для турагентства. Карточки располагаются в сетке, при клике открывается модальное окно со слайдером. Всё работает на чистом JavaScript, без сторонних библиотек.

💡 Вы можете скачать весь проект и посмотреть вживую, а ниже — подробный разбор, как он устроен.

HTML: структура галереи

Вся галерея находится внутри одного секционного блока:

<section class="gallery">
  <div class="container gallery__container">
    <h1 class="title gallery__title">Популярные направления</h1>

    <!-- Контейнер для карточек -->
    <div class="gallery__cards"></div>

    <!-- Модальное окно -->
    <div class="gallery__popup">
      <div class="gallery__popup-close">&times;</div>
      <div class="gallery__popup-arrow gallery__popup-arrow--left">❮</div>
      <div class="gallery__popup-arrow gallery__popup-arrow--right">❯</div>

      <!-- Прокручиваемый блок с контентом -->
      <div class="gallery__popup-scroll">
        <div class="gallery__popup-container">
          <div class="gallery__popup-info">
            <h3 class="gallery__popup-title"></h3>
            <p class="gallery__popup-desc"></p>
          </div>
          <img class="gallery__popup-image" src="" alt="Popup image" />
        </div>
      </div>
    </div>
  </div>
</section>

CSS: стиль галереи

В стилях задаются аккуратные карточки с закруглёнными углами и плавной анимацией при наведении. Ниже — примеры ключевых классов:

.gallery__card {
  position: relative;
  height: 340px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

Информация о карточке появляется при наведении:

.gallery__card-info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.4s ease;
}

.gallery__card:hover .gallery__card-info {
  opacity: 1;
  transform: translateY(0);
}

Также оформлено модальное окно: затемнение, изображение, стрелки и кнопка закрытия.

JavaScript: логика и взаимодействие

Сначала создаём массив с данными карточек:

const cards = [
  {
    title: "Бали, Индонезия",
    desc: "Остров с пляжами, водопадами и храмами...",
    img: "../images/Screenshot_1.png",
  },
  ...
];

Далее — выбираем элементы из DOM:

const cardContainer = document.querySelector(".gallery__cards");
const popup = document.querySelector(".gallery__popup");
const popupImage = document.querySelector(".gallery__popup-image");
const popupTitle = document.querySelector(".gallery__popup-title");
const popupDesc = document.querySelector(".gallery__popup-desc");
const closeBtn = document.querySelector(".gallery__popup-close");
const leftArrow = document.querySelector(".gallery__popup-arrow--left");
const rightArrow = document.querySelector(".gallery__popup-arrow--right");

Теперь создаём карточки:

function renderCards() {
  cards.forEach((card, i) => {
    const el = document.createElement("div");
    el.className = "gallery__card";
    // HTML карточки
    el.innerHTML = `
      <img src="${card.img}" class="gallery__card-image" alt="${card.title}" />
      <div class="gallery__card-info">
        <h3>${card.title}</h3>
        <p>${card.desc}</p>
      </div>
    `;
    // При клике — открытие модального окна
    el.addEventListener("click", () => openPopup(i));
    cardContainer.appendChild(el);
  });
}

Функция открытия окна:

function openPopup(index) {
  currentIndex = index;
  const card = cards[index];
  popupImage.src = card.img;
  popupTitle.textContent = card.title;
  popupDesc.textContent = card.desc;
  popup.classList.add("gallery__popup--open");
  document.body.style.overflow = "hidden"; // запрет скролла фона
}

Закрытие:

function closePopup() {
  popup.classList.remove("gallery__popup--open");
  document.body.style.overflow = ""; // возвращаем скролл
}

Стрелки слайдера:

function showNext() {
  currentIndex = (currentIndex + 1) % cards.length;
  openPopup(currentIndex);
}

function showPrev() {
  currentIndex = (currentIndex - 1 + cards.length) % cards.length;
  openPopup(currentIndex);
}

Инициализация событий:

closeBtn.addEventListener("click", closePopup);
rightArrow.addEventListener("click", showNext);
leftArrow.addEventListener("click", showPrev);

renderCards(); // запускаем отрисовку

Что в итоге

У вас получилась адаптивная сетка карточек, каждая из которых открывает модальное окно со слайдером. Проект можно использовать для каталога туров, портфолио, галерей и других задач, где важно красивое представление изображений с описанием.