Frontend
Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox
toni
Иконка календаря 14.04.2025
Иконка чата 0
Иконка глаза 86
 

Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox. Вы сможете:

  • Листать изображения влево и вправо
  • Выделять центральное изображение
  • По клику открывать картинку в модальном окне с возможностью пролистывания

Все будет работать без сборщиков, на обычном HTML + CSS + JS. Используем две библиотеки:

  • OwlCarousel2 — мощная карусель, которая умеет всё, что нужно;
  • Fancybox — лёгкий лайтбокс, который открывает изображения в модальном окне с затемнением фона и анимацией

В этой статье мы рассмотрим только ключевые моменты в коде. Полный проект доступен для скачивания, также вы можете посмотреть пример его работы.

Подключаем библиотеки

В <head> подключаем CSS для OwlCarousel и FancyBox. А внизу страницы — их JavaScript. Обязательно добавляем jQuery, потому что OwlCarousel работает только с ним.

<!-- OwlCarousel стили -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />

<!-- Fancybox стили -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />

<!-- jQuery (нужен для OwlCarousel) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- OwlCarousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Fancybox JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

HTML-структура страницы

Вот простая структура галереи. Мы создаем секцию с заголовком и пустым блоком .owl-carousel, в который позже вставим изображения с помощью JavaScript. 

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

Список изображений и генерация DOM

Создаем массив с путями к изображениям. Это удобно, если вам нужно часто менять состав галереи — достаточно обновить массив, и всё подгрузится само.

Подпишитесь на наши Telegram-каналы — делимся полезными материалами, чтобы вы были в теме и ничего не пропустили.

💻 Code Lab — программирование простыми словами: статьи, видео, шаблоны и курсы для тех, кто учится и развивается в IT.
👉 t.me/codelab_channel

🔍📦 Device Hub — обзоры и подборки электроники: от наушников до ноутбуков. Сравниваем, советуем, помогаем выбрать.
👉 t.me/devicehub_channel 

const images = [
  { src: "images/Screenshot_1.png", alt: "Картинка 1" },
  { src: "images/Screenshot_2.png", alt: "Картинка 2" },
  // и так далее
];

Теперь добавим изображения в карусель через jQuery. Для каждого изображения создаем ссылку с data-fancybox, чтобы FancyBox мог отследить клик и показать слайдер.

$(document).ready(function () {
  const $carousel = $(".owl-carousel");

  images.forEach((img) => {
    const item = $(`
      <a href="${img.src}" data-fancybox="gallery" data-no-clone>
        <img src="${img.src}" alt="${img.alt}" />
      </a>
    `);
    $carousel.append(item);
  });

Атрибут data-no-clone используется, чтобы позже можно было отфильтровать дубликаты, созданные OwlCarousel.

Инициализация OwlCarousel

$carousel.owlCarousel({
  // Включает бесконечную прокрутку. Последний слайд плавно переходит в первый.
  loop: true,

  // Показывает стрелки "вперёд" и "назад" для ручного управления.
  nav: true,

  // Включает навигационные точки под слайдером.
  dots: true,

  // Центрует активный (текущий) слайд в середине карусели.
  center: true,

  // Отступ между слайдами в пикселях.
  margin: 20,

  // Сколько изображений показывать одновременно.
  items: 2,

  // Текст (или HTML) для кастомных стрелок навигации.
  // Здесь мы используем SVG-иконки вместо текста.
  navText: [
    // Левая стрелка (назад)
    `<svg width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
       <path d="M15 18L9 12L15 6" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`,
    // Правая стрелка (вперёд)
    `<svg width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
       <path d="M9 6L15 12L9 18" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>`
  ]
});

Подключаем FancyBox

OwlCarousel клонирует элементы для создания бесконечной прокрутки. Если не исключить эти дубликаты, FancyBox может открыть одно и то же изображение дважды.

Fancybox.bind("[data-fancybox='gallery']:not(.cloned)", {});

Удаление data-fancybox у клонов

Для дополнительной надёжности удаляем data-fancybox у всех клонов после инициализации OwlCarousel.

$(".owl-carousel").on("initialized.owl.carousel", function () {
  $(".owl-item.cloned a[data-fancybox]").removeAttr("data-fancybox");
});

Стилизация

Для создания красивого внешнего вида добавим стили:

.custom-carousel .owl-item:not(.center) {
  opacity: 0.4;
}

.owl-prev,
.owl-next {
  background: #3b82f6;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.owl-prev:hover,
.owl-next:hover {
  background: #2563eb;
  transform: scale(1.05);
}

Стилизация необязательна, но она делает интерфейс более приятным и современным. Вы можете адаптировать её под собственный дизайн.

Результат

На выходе вы получаете:

  • прокручиваемую карусель изображений;
  • отображение активного слайда по центру;
  • открытие изображения в модальном окне FancyBox;
  • простую реализацию на HTML + CSS + jQuery без сборщиков.
 

Комментарии

0

Без регистрации и смс