Вложенная прокрутка внутри вертикального слайдера, когда колесо мыши: true ⇐ CSS

[Anonymous]

У меня есть вертикальный слайдер, и я использую свайп для перемещения по слайдам.

Высота каждого контейнера слайдера составляет 100vh.

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

Я просмотрел документацию swiper, SO и другие страницы, но не нашел решения.

Вот jsfiddle: https://jsfiddle.net/gentian28/6wdsep1v/13/

HTML

О программе карта 1 карта 2 карточка 3 карточка 4 карта 1 карта 1 карта 1 карта 1 карта 1 карта 1 карта 1 Навыки Контакт CSS

тело { маржа: 0; заполнение: 0; } .d-flex { дисплей: гибкий; } .align-center { выровнять-элементы: по центру; } .justify-center { оправдание-содержание: центр; } .justify-между { оправдание-содержание: пространство между; } .flex-столбец { гибкий поток: столбец; } .column-reverse { гибкий поток: обратный столбец; } .flex-wrap { flex-wrap: обертка; } .col-2 > * { ширина: расчет (100% / 2 – 7,5 пикселей); поле справа: 15 пикселей; поле внизу: 15 пикселей; } .col-2 > *:nth-child(2n) { поле справа: 0; } .col-3 > * { ширина: расчет (100% / 3–10 пикселей); поле справа: 15 пикселей; } .col-3 > *:nth-child(3n) { поле справа: 0; } .col-4 > * { ширина: расчет (100% / 4 – 10,5 пикселей); поле справа: 14 пикселей; } .col-4 > *:nth-child(4n) { поле справа: 0; } .карта { высота: 300 пикселей; } .swiper-контейнер { ширина: 100% — 120 пикселей; высота: 100вх; поле слева: авто; поле справа: авто; } .swiper-слайд { выравнивание текста: по центру; размер шрифта: 18 пикселей; фон: #fff; /* Центрировать текст слайда по вертикали */ дисплей: -webkit-box; дисплей: -ms-flexbox; дисплей: -webkit-flex; дисплей: гибкий; -webkit-box-pack: центр; -ms-flex-pack: центр; -webkit-justify-content: центр; оправдание-содержание: центр; -webkit-box-align: по центру; -ms-flex-align: центр; -webkit-align-items: центр; выровнять-элементы: по центру; переполнение-у: авто; } .swiper-пагинация { дисплей: гибкий; гибкий поток: столбец; } .swiper-pagination-bullet-active { непрозрачность: 0; } .swiper-pagination-bullet { ширина: 120 пикселей; высота: 96 пикселей; граница-радиус: 0; непрозрачность: 0; } JS
const swiperConf = { направление: «вертикальное», слайдыPerView: 1, пространствоМежду: -1, колесо мыши: правда, клавиатура: правда, нумерация страниц: { el: '.swiper-нумерация страниц', кликабельно: правда, } } вар swiper = новый Swiper('.swiper-container', swiperConf);