Как в swiper slider сделать бесконечный thumbnail?

от
prokoding.ru > JavaScript > Как в swiper slider сделать бесконечный thumbnail?

Для создания бесконечного thumbnail в swiper slider вам потребуется несколько шагов. Данный процесс требует некоторые знания о JavaScript и работе с библиотекой Swiper. Вот пошаговое объяснение:

Шаг 1: Подключение библиотеки Swiper
Убедитесь, что у вас установлена и подключена последняя версия библиотеки Swiper в вашем проекте. Вы можете скачать ее с официального сайта или использовать CDN, например:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Шаг 2: HTML-разметка
Создайте контейнер для вашего слайдера и его thumbnail. Убедитесь, что контейнеры имеют соответствующие классы:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Слайды -->
  </div>
</div>

<div class="swiper-container-thumbnails">
  <div class="swiper-wrapper">
    <!-- Thumbnail-ы -->
  </div>
</div>

Шаг 3: Инициализация swiper slider
Используйте JavaScript для инициализации swiper слайдера с параметрами, которые вам требуются. Обратите внимание на thumbnail параметр, который позволяет связать слайды и thumbnail-ы:

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: {
      el: '.swiper-container-thumbnails',
      slidesPerView: 3,
      spaceBetween: 10
    }
  }
});

Шаг 4: Добавление бесконечного thumbnail
Swiper не предоставляет встроенной опции для бесконечности thumbnail. Однако, вы можете достичь этого, добавив копии thumbnail-ов в начало и конец контейнера thumbnail-ов:

var thumbnailsSwiper = new Swiper('.swiper-container-thumbnails', {
  slidesPerView: 3,
  spaceBetween: 10,
  loop: true,
  loopedSlides: 5, // Количество thumbnail-ов
  slideDuplicateClass: 'swiper-slide-duplicate-thumbnails',// Класс дублированных thumbnail-ов
  navigation: {
    nextEl: '.swiper-button-next-thumbnails',
    prevEl: '.swiper-button-prev-thumbnails',
  },
  on: {
    slideDuplicate: function () {
      // Добавление дубликатов thumbnail-ов
      var $firstSlides = this.$el.find('.swiper-slide:nth-child(-n+' + this.loopedSlides + ')');
      var $lastSlides = this.$el.find('.swiper-slide:nth-last-child(-n+' + this.loopedSlides + ')');
      $firstSlides.clone().addClass('swiper-slide-duplicate-thumbnails').appendTo(this.$el.find('.swiper-wrapper'));
      $lastSlides.clone().addClass('swiper-slide-duplicate-thumbnails').prependTo(this.$el.find('.swiper-wrapper'));
    }
  }
});

Теперь ваш swiper slider должен отображать бесконечный thumbnail. Вы можете настроить опции swiper и внешний вид в соответствии с вашими потребностями. Помните, что необходимо включить CSS стили, чтобы отображать эти контейнеры и кнопки навигации (например, .swiper-button-next-thumbnails, .swiper-button-prev-thumbnails).

Вот вам пример, как это может выглядеть в итоге. Он не полный, но дает вам представление о том, как всё это работает:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <style>
    .swiper-container-thumbnails {
      max-width: 300px;
      margin: 0 auto;
      background-color: #f0f0f0;
    }

    .swiper-container-thumbnails .swiper-wrapper {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .swiper-container-thumbnails .swiper-slide {
      width: 80px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #c0c0c0;
      color: #ffffff;
    }

    .swiper-container .swiper-wrapper .swiper-slide {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50px;
    }
  </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
      <div class="swiper-slide">6</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <div class="swiper-container-thumbnails">
    <div class="swiper-wrapper">
      <div class="swiper-slide">1</div>
      <div class="swiper-slide">2</div>
      <div class="swiper-slide">3</div>
      <div class="swiper-slide">4</div>
      <div class="swiper-slide">5</div>
      <div class="swiper-slide">6</div>
    </div>
    <div class="swiper-button-prev-thumbnails"></div>
    <div class="swiper-button-next-thumbnails"></div>
  </div>

  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: {
          el: '.swiper-container-thumbnails',
          slidesPerView: 3,
          spaceBetween: 10
        }
      }
    });

    var thumbnailsSwiper = new Swiper('.swiper-container-thumbnails', {
      slidesPerView: 3,
      spaceBetween: 10,
      loop: true,
      loopedSlides: 6,
      slideDuplicateClass: 'swiper-slide-duplicate-thumbnails',
      navigation: {
        nextEl: '.swiper-button-next-thumbnails',
        prevEl: '.swiper-button-prev-thumbnails',
      },
      on: {
        slideDuplicate: function () {
          var $firstSlides = this.$el.find('.swiper-slide:nth-child(-n+' + this.loopedSlides + ')');
          var $lastSlides = this.$el.find('.swiper-slide:nth-last-child(-n+' + this.loopedSlides + ')');
          $firstSlides.clone().addClass('swiper-slide-duplicate-thumbnails').appendTo(this.$el.find('.swiper-wrapper'));
          $lastSlides.clone().addClass('swiper-slide-duplicate-thumbnails').prependTo(this.$el.find('.swiper-wrapper'));
        }
      }
    });
  </script>
</body>
</html>

Теперь вы можете модифицировать этот пример, чтобы он соответствовал вашим потребностям и стилям.