Как соединить два thumbs в swiper?

Для соединения двух thmbs в Swiper можно воспользоваться опцией thumbs, которая предоставляется библиотекой Swiper для создания связи между главным слайдером и дополнительными слайдерами (thmbs). Подробно рассмотрим шаги этого процесса:

1. Инициализация основного слайдера (main Swiper):

   var mainSwiper = new Swiper('.main-slider', {
       // Настройки основного слайдера
       // ...
   });

2. Инициализация слайдера для thmbs:

   var thumbsSwiper = new Swiper('.thumbs-slider', {
       // Настройки слайдера thmbs
       // ...
   });

3. Создание связи между основным и дополнительным слайдером:

Для того, чтобы связать два слайдера между собой, необходимо использовать опцию thumbs в основном слайдере и указать ему объект с ключами swiper и slideThumbView:

   mainSwiper.thumbs = {
       swiper: thumbsSwiper,
       slideThumbView: true
   };

4. Обновление слайдера при изменении активного слайда:

Чтобы при клике на thmb в дополнительном слайдере показывался соответствующий слайд в основном слайдере, необходимо добавить обработчик события. Следующий код обновит активный слайд в основном слайдере при клике на thmb в дополнительном слайдере:

   thumbsSwiper.on('click', function () {
       mainSwiper.slideTo(thumbsSwiper.clickedIndex);
   });

5. Запуск слайдеров:

Наконец, запустите оба слайдера, чтобы они корректно работали вместе:

   mainSwiper.init();
   thumbsSwiper.init();

Следуя этим шагам, вы сможете создать два взаимосвязанных слайдера в Swiper: один в качестве основного слайдера, а другой в качестве thmbs.