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

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

[SilentVampR]

Было тогда это или нет. Сейчас это решается так:

...
slidesPerView: 1,
mousewheel: {
  enabled: true,
  releaseOnEdges: true,
},
...