Vertical Slider Animation [JQuery]

index.html

<div class="slide s1"><img src="http://blog.domainparking.ru/wp-content/uploads/2019/04/dotmusic-1024x683.jpeg" alt=""></div>
<div class="slide s2"><img src="https://i.artfile.me/wallpaper/10-04-2018/5184x3456/muzyka--drugoe-ruki-1326150.jpg" alt=""></div>
<div class="slide s1"><img src="https://images.wallpaperscraft.ru/image/dj_naushniki_ustanovka_122020_4135x2756.jpg" alt=""></div>
<div class="slide s2"><img src="https://vibirai.ru/image/1259687.jpg" alt=""></div>
<div class="slide s1"><img src="https://wallbox.ru/wallpapers/main/201134/gitara-muzyka-siniy-e56f2fa.jpg" alt=""></div>

script.js

var next = 0;
var timeout = 1000;

var scrollBlock = () => {
	$(window).bind("mousewheel DOMMouseScroll MozMousePixelScroll", (event) => {
		$(window).unbind("mousewheel DOMMouseScroll MozMousePixelScroll");
		$(window).bind("mousewheel DOMMouseScroll MozMousePixelScroll",freeze);
		setTimeout(scrollBlock,timeout);
		
		var st = parseInt(event.originalEvent.wheelDelta || -event.originalEvent.detail);
		console.log(st);
		if (st <= 0 ) {
			// downscroll code
			next = next == $(".slide").length-1 ? next : (next += 1);
			console.log(next);
			$("html, body").animate(
				{
					scrollTop: $(".slide")
						.eq(next)
						.offset().top
				},
				timeout
			);
		} else {
			// upscroll code
			next = next == 0 ? next : next -= 1;
			$("html, body").animate(
				{
					scrollTop: $(".slide")
						.eq(next)
						.offset().top
				},
				timeout
			);
		}
		
	});
};

var freeze = () => {
	$("html, body").
					scrollTop = $(".slide")
						.eq(next)
						.offset().top;
};

scrollBlock();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.sass

.slide
	width: 100%
	height: 100vh
	background-size: cover
	img
		width: 100%
		height: 100%

vertical-slider-animation-jquery.markdown

Vertical Slider Animation [JQuery]

How to make vertical slider on scroll without libs.

A Pen by Adefful on CodePen.

License.