Как при скролле мышкой прокручивать слайдер а не страницу?
Есть такой блок
Там будет 4 этапа, страница как обычно скролится вниз до этого блока а потом вместо страницы с помощью колесика скролится слева направо этот слайдер ( думал реализовать это дело на swiper ну или просто html без всяких слайдеров) не знаю как лучше даже, посоветуйте как лучше сделать такое?
snippet
Попытался воспроизвести в песочнице, на тестовом сайте со swiper у меня показывается3 элемента а остальыне скролятся, а тут даже ширина 522px почему то не применяется. Но принцип вот такой, как доскролив до swiper чтоб при скроле колесом он скролил слайды а не дальше страницу, ну а как закончил то уже дальше страницу.
Дополнительно:
Ответы:
вариант с готовыми инструментами:
берёшь ScrollTrigger и задаешь pin блоку свайпера, когда он достигает центра экрана, из onUpdate коллбека scrolltrigger'a берёшь значение progress и его же используешь в swiper.setProgress() чтобы сдвинуть блоки. Будет работать в обоих направлениях скрола.
При желании свайпер можно заменить на просто блок со слайдами и двигать его через transform: translateX (или через gsap анимацию)
- Спасибо тебе, хороший человек, как раз такая тема возникла и тут ты )))))
Посмотрите в сторону Scroll driven animations
Там есть и пример, который вам нужен
1) высчитываешь расстояние от начала страницы до блока со слайдером, плюсуешь высоту этого блока
2) на моменте, когда страница пролистана до конца блока (это значение мы получаем в шаге №1) - дизейблишь скролл по странице
3) на событие онскролл навешиваешь обработчик, который будет сдвигать общий блок со всеми слайдами
4) берешь ширину блока со слайдами, и вычитаешь смещение из шага №3
5) когда блок со слайдами сдвинут на нужное расстояние (до конца, допустим - это будет вся ширина) - отключаешь алгоритм описанный на шагах 2-4. И включаешь обратно онскролл по странице
если будут листать вверх, то все то же самое только наоборот
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать скролл слайдера с помощью мыши, а не страницы, вам потребуется использовать JavaScript. Вот пример кода на JavaScript, который позволит вам достичь желаемого эффекта:
```html
.slider {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.slide {
display: inline-block;
width: 100%;
height: 300px;
}
function scrollSlider(event) {
event.preventDefault();
const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
const slider = document.querySelector('.slider');
slider.scrollLeft -= (delta * 40);
}
```
В данном примере у нас есть контейнер `.slider`, внутри которого располагаются слайды `.slide`. При прокрутке колесиком мыши внутри контейнера, функция `scrollSlider` срабатывает и изменяет положение скролла контейнера в зависимости от направления прокрутки.
Таким образом, при использовании данного кода вы сможете реализовать скролл слайдера с помощью мыши, не прокручивая всю страницу.