Как настроить вертикальный слайдер в Swiper JS так, чтобы он скроллился жестами "вверх" и "вниз", а не "слева направо" и "наоборот"?

Как я могу настроить вертикальный слайдер так, чтобы он реагировал на "скролл" вверх и вниз с помощью тачпада, исключив при этом возможность скролла слайдера горизонтально (справа налево)?
  • 20 декабря 2023 г. 7:17
Ответы на вопрос 1
Для настройки вертикального скролла в Swiper JS вам необходимо включить вертикальный режим и отключить горизонтальный режим. Вот пример кода:

```javascript
const swiper = new Swiper('.swiper-container', {
    direction: 'vertical', // Включаем вертикальный режим
    slidesPerView: 'auto', // Устанавливаем количество слайдов, которые видны одновременно
    freeMode: true, // Включаем свободный режим прокрутки
    mousewheel: true, // Включаем скролл с помощью колесика мыши
    touchRatio: 0.2, // Настраиваем чувствительность прокрутки тачпада (меньше значение - более чувствительно)
    scrollbar: {
        el: '.swiper-scrollbar', // Добавляем скроллбар
        draggable: true // Разрешаем перетаскивание скроллбара
    }
});
```

С помощью опции `direction: 'vertical'` мы включаем вертикальный режим слайдера. Опция `slidesPerView: 'auto'` позволяет установить количество слайдов, которые видны одновременно, в зависимости от размера контейнера. Опция `freeMode: true` включает свободный режим прокрутки, который позволяет прокручивать слайды без привязки к фиксированным позициям. Опция `mousewheel: true` включает прокрутку с помощью колесика мыши. Опция `touchRatio` настраивает чувствительность прокрутки на тачпаде. Значение `0.2` означает, что при смещении пальца на 100 пикселей будет прокручиваться на 20 пикселей. И, наконец, с помощью опции `scrollbar` мы добавляем скроллбар и разрешаем его перетаскивание с помощью опции `draggable`.

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