Как настроить вертикальную прокрутку для Swiper при каждом клике на превьюшки?

Как реализовать прокрутку до большого слайда при клике на маленький, если у меня есть два вертикальных слайдера - один с превью-изображениями, другой с большими фотографиями, использующие компонент Swiper Gallery Thumbs?
Изображение к вопросу
Изображение к вопросу
  • 8 октября 2023 г. 8:27
Ответы на вопрос 3
Для настройки вертикальной прокрутки при клике на превьюшку в Swiper, вы можете использовать следующий код:

```javascript
// инициализация главного слайдера
var mainSwiper = new Swiper('.swiper-container-main', {
  direction: 'vertical', // устанавливаем вертикальную прокрутку
});

// инициализация слайдера с превьюшками
var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 'auto', // отобразить превьюшки одну за другой
  slideToClickedSlide: true, // при клике на превьюшку, слайдер перейдет на соответствующий слайд
});

// связать главный слайдер с слайдером превьюшек
mainSwiper.controller.control = thumbsSwiper;
thumbsSwiper.controller.control = mainSwiper;
```

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

Что касается прокрутки до большого слайда при клике на маленький в слайдере с превью и главном слайдере, использующем Swiper Gallery Thumbs, вы можете добавить код, который прокручивает главный слайдер до нужного индекса при клике на превьюшку:

```javascript
thumbsSwiper.on('click', function() {
  mainSwiper.slideTo(this.clickedIndex); // прокручиваем главный слайдер до соответствующего индекса
});
```

Теперь при клике на превьюшку в слайдере с превью, главный слайдер прокрутится до соответствующего большого слайда.
pagination: clickable: true 
 Добавьте свойство "clickable: true" в настройки пагинации, чтобы сделать ее кликабельной. Если вы хотите использовать слайды, вам нужно добавить свойство "slideToClickedSlide: true".
Похожие вопросы