Как реализовать вложенный слайдер на Swiper.js

Вложенный слайдер (nested slider) - это сложный UI-компонент, где внутри каждого слайда родительского каруселя находится самостоятельный дочерний слайдер. Такая структура часто используется в интернет-магазинах, портфолио и галереях для детального просмотра товаров. Swiper.js позволяет создать вложенную конструкцию, но требует правильной инициализации и разметки. В этой статье мы разберём пошаговую реализацию, типичные ошибки и способы их исправления.

Структура вложенного слайдера

Ключевая задача - сохранить независимость слайдеров, чтобы они не блокировали друг друга. Родительский слайдер содержит эскизы (thumbnails) для навигации по основным разделам. Внутри каждого слайда родителя размещается дочерний слайдер со своими эскизами и текстовым контентом. Правильная разметка выглядит так:

<div class="parent-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Дочерний слайдер -->
      <div class="child-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Картинка 1</div>
          <div class="swiper-slide">Картинка 2</div>
        </div>
        <!-- Эскизы дочернего слайдера -->
        <div class="child-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Эскиз 1</div>
            <div class="swiper-slide">Эскиз 2</div>
          </div>
        </div>
        <div class="child-text-content">Текст для текущего слайда</div>
      </div>
    </div>
  </div>
  <!-- Эскизы родительского слайдера -->
  <div class="parent-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Эскиз родителя 1</div>
    </div>
  </div>
</div>

Инициализация и настройка

Для корректной работы вложенных слайдеров необходимо инициализировать каждый экземпляр отдельно. Родительский слайдер создаётся первым, затем внутри его события slideChange или init - дочерние. Важно использовать параметр nested: true для родительского слайдера, чтобы он не перехватывал события дочерних. Пример инициализации:

const parentSwiper = new Swiper('.parent-swiper', {
  nested: true,
  thumbs: { swiper: parentThumbs }
});

// После инициализации родителя создаём дочерние слайдеры
document.querySelectorAll('.child-swiper').forEach(el => {
  new Swiper(el, {
    thumbs: { swiper: el.nextElementSibling }
  });
});

Типичные ошибки и их решение

Дочерний слайдер не запускается

Чаще всего это происходит из-за конфликта событий. Убедитесь, что родительский слайдер имеет параметр nested: true. Также проверьте, что дочерние слайдеры инициализируются после полной загрузки DOM, а их селекторы уникальны в пределах страницы.

Дублирование эскизов

Эскизы дочернего слайдера должны быть уникальными для каждого родительского слайда. Не пытайтесь использовать один контейнер для всех - создайте отдельный блок .child-thumbs внутри каждого .swiper-slide родителя. Для управления контентом под эскизами используйте событие slideChange дочернего слайдера, обновляя текстовый блок динамически.

Динамическое обновление контента

Чтобы текст под эскизами менялся при переключении дочерних слайдов, добавьте обработчик события slideChange:

childSwiper.on('slideChange', function () {
  const textBlock = this.el.querySelector('.child-text-content');
  const slidesData = [
    'Текст для первого слайда',
    'Текст для второго слайда'
  ];
  textBlock.textContent = slidesData[this.activeIndex];
});

Этот подход позволяет избежать дублирования и делает структуру чистой.

Заключение

Создание вложенного слайдера на Swiper.js требует внимания к деталям: правильной разметки, уникальных инициализаций и обработки событий. Следуя описанной схеме, вы сможете реализовать сложную карусель с эскизами и динамическим контентом без багов. Если возникают проблемы, проверьте консоль браузера и убедитесь, что все экземпляры Swiper имеют разные пространства имён.