Как настроить swiper, чтобы при клике на миниатюру он автоматически прокручивался до соответствующего большого изображения?

Question

Аввакум

javascript , react , swiper , vue

Как настроить swiper, чтобы при клике на миниатюру он автоматически прокручивался до соответствующего большого изображения?

Где можно найти пример товара с кодом HY7105 на сайте brandshop.ru?

14 октября 2023 г. 18:19

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для настройки swiper, чтобы при клике на миниатюру прокручивался до соответствующего большого изображения, вам понадобится использовать свойство `slideTo` метода swiper. 

Вот пример кода, который может помочь вам реализовать это:

```html
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="path/to/image1.jpg"
            alt="Image 1"
            class="thumbnail"
            data-slide-index="0"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="path/to/image2.jpg"
            alt="Image 2"
            class="thumbnail"
            data-slide-index="1"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="path/to/image3.jpg"
            alt="Image 3"
            class="thumbnail"
            data-slide-index="2"
          />
        </div>
      </div>

      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

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

      var thumbnails = document.getElementsByClassName('thumbnail');

      for (var i = 0; i < thumbnails.length; i++) {
        thumbnails[i].addEventListener('click', function() {
          var slideIndex = parseInt(this.getAttribute('data-slide-index'));
          swiper.slideTo(slideIndex);
        });
      }
    </script>
  </body>
</html>
```

В этом примере мы используем библиотеку Swiper, чтобы создать карусель с миниатюрами внутри контейнера `swiper-container`. Миниатюры представлены как отдельные слайды с классом `swiper-slide`. Каждая миниатюра имеет атрибут `data-slide-index`, который хранит индекс соответствующего большого изображения в основной карусели.

Мы используем цикл `for` и метод `addEventListener` для назначения события `click` на каждую миниатюру. Когда миниатюра кликается, мы получаем значение атрибута `data-slide-index` и прокручиваем основной swiper до этого слайда с помощью метода `slideTo`.

Чтобы найти пример товара с кодом HY7105 на сайте brandshop.ru, вам придется перейти на сайт brandshop.ru и выполнить поиск по этому коду или использовать функции поиска на сайте по каталогу/разделам товаров. Обратитесь к официальному сайту brandshop.ru для получения точных инструкций или воспользуйтесь функцией поиска на сайте и введите "HY7105".