@html_student
Молодой и глупый.

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

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



Попытался воспроизвести в песочнице, на тестовом сайте со swiper у меня показывается3 элемента а остальыне скролятся, а тут даже ширина 522px почему то не применяется. Но принцип вот такой, как доскролив до swiper чтоб при скроле колесом он скролил слайды а не дальше страницу, ну а как закончил то уже дальше страницу.
  • Вопрос задан
  • 369 просмотров
Пригласить эксперта
Ответы на вопрос 3
@its2easyy
вариант с готовыми инструментами:
берёшь ScrollTrigger и задаешь pin блоку свайпера, когда он достигает центра экрана, из onUpdate коллбека scrolltrigger'a берёшь значение progress и его же используешь в swiper.setProgress() чтобы сдвинуть блоки. Будет работать в обоих направлениях скрола.
При желании свайпер можно заменить на просто блок со слайдами и двигать его через transform: translateX (или через gsap анимацию)
Ответ написан
Bowen
@Bowen
Японский бог
Посмотрите в сторону Scroll driven animations

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

если будут листать вверх, то все то же самое только наоборот
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Decart IT-production Москва
от 180 000 до 230 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
от 200 000 до 600 000 ₽
15 апр. 2024, в 09:15
1200 руб./за проект
15 апр. 2024, в 07:55
5000 руб./за проект
15 апр. 2024, в 04:12
1 руб./за проект