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

Question

[Артем Колчин]

Есть такой блок

Там будет 4 этапа, страница как обычно скролится вниз до этого блока а потом вместо страницы с помощью колесика скролится слева направо этот слайдер ( думал реализовать это дело на swiper ну или просто html без всяких слайдеров) не знаю как лучше даже, посоветуйте как лучше сделать такое?



Попытался воспроизвести в песочнице, на тестовом сайте со swiper у меня показывается3 элемента а остальыне скролятся, а тут даже ширина 522px почему то не применяется. Но принцип вот такой, как доскролив до swiper чтоб при скроле колесом он скролил слайды а не дальше страницу, ну а как закончил то уже дальше страницу.

Answer 1

[its2easyy]

вариант с готовыми инструментами:
берёшь ScrollTrigger и задаешь pin блоку свайпера, когда он достигает центра экрана, из onUpdate коллбека scrolltrigger'a берёшь значение progress и его же используешь в swiper.setProgress() чтобы сдвинуть блоки. Будет работать в обоих направлениях скрола.
При желании свайпер можно заменить на просто блок со слайдами и двигать его через transform: translateX (или через gsap анимацию)

Comments

[Александр Васильев]

Спасибо тебе, хороший человек, как раз такая тема возникла и тут ты )))))

Answer 2

[Bowen]

Посмотрите в сторону Scroll driven animations

Там есть и пример, который вам нужен

Answer 3

[dkrylov]

1) высчитываешь расстояние от начала страницы до блока со слайдером, плюсуешь высоту этого блока
2) на моменте, когда страница пролистана до конца блока (это значение мы получаем в шаге №1) - дизейблишь скролл по странице
3) на событие онскролл навешиваешь обработчик, который будет сдвигать общий блок со всеми слайдами
4) берешь ширину блока со слайдами, и вычитаешь смещение из шага №3
5) когда блок со слайдами сдвинут на нужное расстояние (до конца, допустим - это будет вся ширина) - отключаешь алгоритм описанный на шагах 2-4. И включаешь обратно онскролл по странице

если будут листать вверх, то все то же самое только наоборот