Как прокрутить слайд в вертикальном слайде и принести его на следующий слайд и исчезнуть с помощью swiper.js? ⇐ Javascript

[Anonymous]

Как говорится в названии, как мне прокрутить слайд, который имеет 500vh, а затем привязать к следующему слайду и исчезнуть с помощью swiper.js? /Echo1017/pen/npwrbgq? Editors = 1010





I want to scroll within a vertical slide and fade to the next slide!


html, body {
position: relative;
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.swiper-slide:first-child {
height: 500vh;
overflow: auto;
background: linear-gradient(blue, pink);
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
}
.swiper-slide:nth-child(2) {
background-color: #98fb98;
}
.swiper-slide:nth-child(3) {
background-color: #87cefa;
}





SLIDE 1
When I scroll down this 500vh slide to the bottom, I want it to snap and fade to show the next slide.
SLIDE 2
SLIDE 3





var swiper = new Swiper('.swiper', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
direction: 'vertical',
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
slidesPerView: 'auto',
speed: 1000,
});



< /code>
Я хочу сохранить поведение как оно есть, и позволить первой слайде быть прокручиваемым.
Я попробовал бесплатный режим, но после небольшого прокрутки он возвращается к вершине слайда.

Подробнее здесь: https://stackoverflow.com/questions/794 ... e-next-sli