Один из режимов навигации в Swiper — называется freemode. Он позволяет листать слайды (тащить мышкой или свайпить) без фиксации на границах слайда. Но если вы используете навигацию, то перелистывание будет производиться дискретно по слайдам.
В некоторых случаях, хотелось бы реализовать навигацию с листанием, к примеру, на определенное число пикселей.
Т.к. штатная навигация не позволяет добиться нужного эффекта, то её приходится отключать, чтобы она не мешала нам.
|
1 2 3 4 5 |
const swiper = new Swiper(elm, { freeMode: true, slidesPerView: "auto", navigation: false, }); |
Родные кнопки «влево»-«вправо» можно оставить, отключение навигации не влияет на шаблон. Обрабатывать события нам придется самим. Давайте введем константу для значения смещения в пикселях и прикрепим к кнопкам кастомный обработчик.
|
1 2 3 4 5 6 7 8 9 |
const SCROLL_AMOUNT = 350; let elm = $('.swiper'); $(elm) .find(".swiper-button-next") .bind('click', () => moveSwiper(SCROLL_AMOUNT)); $(elm) .find(".swiper-button-prev") .bind('click', () => moveSwiper(-SCROLL_AMOUNT)); |
Swiper предоставляет метод setTranlate(x), который устанавливает переменную смещения ленты со слайдами. Потом можно также вызывать метод updateProgress() для актуализации прогресс-бара и состояния.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function moveSwiper(delta) { // Смещаем вручную swiper.setTranslate(swiper.translate - delta); // учитываем границы ленты слайдов if (swiper.translate > 0) { swiper.setTranslate(0) } if (swiper.width - swiper.translate > swiper.virtualSize) { swiper.setTranslate(swiper.width - swiper.virtualSize); } // Обновляем прогресс-бары и состояние swiper.updateProgress(); } |
Рекомендуется также добавить анимацию, чтобы смещения были гладкими. Например:
|
1 |
swiper.wrapperEl.style.transition = "transform 0.4s ease-out"; |