As the title says, how do I scroll through a slide that has 500vh and then snap to the next slide and fade with Swiper.js?
https://codepen.io/Echo1017/pen/NPWrBGq?editors=1010
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I want to scroll within a vertical slide and fade to the next slide!</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
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;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><h1>SLIDE 1 <br/>When I scroll down this 500vh slide to the bottom, I want it to snap and fade to show the next slide.</h1></div>
<div class="swiper-slide"><h1>SLIDE 2</h1></div>
<div class="swiper-slide"><h1>SLIDE 3</h1></div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper', {
effect: 'fade',
fadeEffect: {
crossFade: true
},
direction: 'vertical',
mousewheel: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
slidesPerView: 'auto',
speed: 1000,
});
</script>
</body>
</html>
I want to keep the behaviour as it is and allow the first slide to be scrollable.
I have tried free mode, but after a little scrolling it goes back to the top of the slide.