Styjun

I have a vertical slider and I'm using swiper to navigate through the slides.

Every swiper-slide container height is 100vh.

I have a slide which content is greater than the view height and when scrolling with the mousewheel, I want to first scroll it's content and when the end or top is reached, according to the scroll direction, move to the next or previous slide.

I went through swiper documentation, SO and other pages but didn't find a solution.

Here is the jsfiddle:
https://jsfiddle.net/gentian28/6wdsep1v/13/

HTML

<div class="swiper-container">
 <main class="main swiper-wrapper">

 <!-- landing -->
 <section id="home" class="swiper-slide">
 <div id="particles-js"></div>
 <div id="typeIt" class="d-flex align-center"></div>
 </section>

 <!-- about -->
 <section id="about" class="swiper-slide">
 <span class="animation">About</span>
 </section>

 <!-- portfolio -->
 <section id="portfolio" class="swiper-slide d-flex flex-wrap col-3">
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 2
 </div>
 <div class="card">
 card 3
 </div>
 <div class="card">
 card 4
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 <div class="card">
 card 1
 </div>
 </section>

 <!-- technologies -->
 <section id="skills" class="swiper-slide">
 Skills
 </section>

 <!-- contact -->
 <section id="contact" class="swiper-slide">
 Contact
 </section>

 </main>

</div>

CSS

body 
 margin: 0;
 padding: 0;

.d-flex 
 display: flex;

.align-center 
 align-items: center;

.justify-center 
 justify-content: center;

.justify-between 
 justify-content: space-between;

.flex-column 
 flex-flow: column;

.column-reverse 
 flex-flow: column-reverse;

.flex-wrap 
 flex-wrap: wrap;

.col-2 > * 
 width: calc(100% / 2 - 7.5px);
 margin-right: 15px;
 margin-bottom: 15px;

.col-2 > *:nth-child(2n) 
 margin-right: 0;


.col-3 > * 
 width: calc(100% / 3 - 10px);
 margin-right: 15px;


.col-3 > *:nth-child(3n) 
 margin-right: 0;


.col-4 > * 
 width: calc(100% / 4 - 10.5px);
 margin-right: 14px;


.col-4 > *:nth-child(4n) 
 margin-right: 0;

.card 
 height: 300px;


.swiper-container 
 width: 100% - 120px;
 height: 100vh;
 margin-left: auto;
 margin-right: auto;

.swiper-slide 
 text-align: center;
 font-size: 18px;
 background: #fff;
 /* Center slide text vertically */
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 overflow-y: auto;

.swiper-pagination 
 display: flex;
 flex-flow: column;

.swiper-pagination-bullet-active 
 opacity: 0;

.swiper-pagination-bullet 
 width: 120px;
 height: 96px;
 border-radius: 0;
 opacity: 0;

JS

const swiperConf = 
 direction: 'vertical',
 slidesPerView: 1,
 spaceBetween: -1,
 mousewheel: true,
 keyboard: true,
 pagination: 
 el: '.swiper-pagination',
 clickable: true,
 


var swiper = new Swiper('.swiper-container', swiperConf);