Как прокручивать swiper на скролл окна вниз?

Question

[Полина Емельянова]

Коллеги, прошу указать где искать решение

САБЖ:
Есть страница, на ней есть Swiper слайдер.

ЗАДАЧА:
Надо запускать его скролл, т.е скроллить слайдер автоматом, самостоятельно, при скролле окна вниз (window.addEventListener("scroll", function (e){......})).
Перерыла всю доку: не могу найти нужный адекватный задаче метод у слайдера.

Песочница


Заранее БЛАГОДАРЮ!

Comments

[its2easyy]

прокручивать свайпер на один слайд при скролле страницы на определенное количество пикселей или прокручивать свайпер на какое то количество пикселей (но не цельными слайдами)?

[imko]

https://swiperjs.com/swiper-api#method-swiper-slideNext
Ну и slidePrev в обратную сторону
Но важно иметь в виду что хоть свайпер и старается быть золотым молотком-переростком с уже готовыми параметрами методами и событиями даже вроде "почесатьПятку" и "whenПочесанаПятка" он не сделает тебе блок страинцы, логику обработки прокрутки и всего что ты хочешь чтобы при этом происходило

[Полина Емельянова]

imko, Поставила. Швелиться! Благодарю!

Может, можете подсказать, как можно контролировать СКОРОСТЬ листания? А то пролитает все как пуля... А мне бы более медленно.)

[imko]

Полина Емельянова, наверно на скролл окна повесила? ну тогда можно например сделать шаг, ну допустим 100 пикселей, на каждое событие скролла суммировать куда-то сколько прокручено(в событии лежит длина прокрутки) как добило до нашего шага сумму обнулять и пинать прокрутку, в принципе в том же обработчике скролла можно это и производить с проверкой

[imko]

Полина Емельянова, только скролл окна надо либо с концами блочить и слушать уже не scroll а wheel, либо сдлеать sticky слайдер и огромную по высоте область в которой он будет кататься за экраном и крутиться

[Полина Емельянова]

imko,
Это просто секция. Нет задания что-то прилеплять и слава Провидению)

Если не лень и есть возможность - прошу, покажите пример скрипта. Я сама такое не напишу, пока.(

[imko]

Полина Емельянова, ну госпадя

let step = 300
let currentScroll = 0

window.addEventListener("wheel", (event) => {
	currentScroll += event.deltaY
	if (currentScroll >= step) {
		currentScroll = 0
		swiper.slideNext()
	} else if (currentScroll <= step * -1) {
		swiper.slidePrev()
		currentScroll = 0
	}
})

только еще кинуть какой-нибудь IntersectionObserver чтоб оно крутиться начало только когда в экран попадет
с событием скролла в принципе аналогично но у него нету delta, так что надо будет эту дельту ручками посчитать как разность позиций прокрутки окна

Answer 1

[FKV]

Смотрите документацию swiper модуль Mousewheel Control параметр releaseOnEdges

Comments

[FKV]

То есть если взять ваш пример codepen, то надо добавить опцио

mousewheel: {
    releaseOnEdges: true,
  },

[Полина Емельянова]

Дело хорошее и роботает, БЛАГОДАРЮ!!! Но немного не то событие - мне скорее СКРОЛЛ окна, а не мышь.)
Я нашла, что там можно "слушать" разные контейнеры, но все равно немного не то.
Может можно как-то какой метод передать в скролл? А особенно контролировать СКОРОСТЬ прокручивания слайдов.

[FKV]

Полина Емельянова, А у вас на странице будет только слайдер, высотой равный высоте вьюпорта? Или до слайдера и после него будет контент и надо сначала доскролить до слайда, на нем зафисировать слайдер и скролить слайды до последнего и потом уже скрол до конца старницы?

[Полина Емельянова]

FKV, ПРОСТО слайдер. Ничего никуда фиксировать не надо.

[FKV]

В моем понимании это должно быть так https://codepen.io/luis-lessrain/pen/PoXwpEo
Для этого нужен gsap и его плагин scrollTrigger.