Как мне на горизонтальный слайдер сделать вертикальный скролл?

Question

[Habr_Agent]

У меня на странице в середине есть слайдер из 11 картинок. Мне нужно чтобы при скроле вниз когда я дохожу до моего слайдера скрол делался листал мой горизонтальный слайдер и после того как дойдет до конца листалась дальше страница и обратно.

Comments

[Denis1205]

как реализован слайдер?

[Habr_Agent]

Denis1205, Я его по разному реализовывал, я так понял в swiper нет встроенной функции такой

[Habr_Agent]

Denis1205, Могу по новому реализовать

const container = document.querySelector('.mySwiper');
  container.addEventListener('wheel', (e) => {
   e.preventDefault();
   container.scrollLeft += e.deltaY;
  })

[Denis1205]

Habr_Agent, Habr_Agent, ну если у вас свайпер через swiper js сделан, то там же есть параметр direction

cosnt mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  slidesPerView: 1,
  loop: true,
});

по идеи когда долистается до конца, скрол вернется в вертикальное положение, если нет то можно как то так сделать

mySwiper.on('slideChange', function () {
  if (mySwiper.isEnd) {
    window.scrollTo(0, window.innerHeight);
  }
});

[Habr_Agent]

Denis1205, при direction horizontal у меня все исчезает и как будто бесконечный сколл

Answer 1

[Eugene]

в свайпере должен быть включен скролл мышкой для такого (если такая фугкция там есть).
https://swiperjs.com/types/interfaces/types_module...

Твоя задука понятна, но такие вещи не делают через свайперы и тд. Для этого пишут кастомный код, где как такового слайдера и нет, а есть двигающиеся блоки от скролла мышки.
Потому что если мышка будет за пределами блока, сайт будет листаться как обычно

Comments

[Habr_Agent]

Да я так и подумал решил сделать постраничный скролл, когда доходит до нужной страницы. со слайдом, буду менять направление скрола и обратно, спасибо за ответ