JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://test.htmlcenter.by/ra-land/new/js/jquery.js"></script>
<script src="http://test.htmlcenter.by/ra-land/new/js/jquery.mousewheel.js"></script>
    
    <ul class="nav">
		<li><a href="#1" class="link_slide1 active_nav">1</a></li>
		<li><a href="#2" class="link_slide2">2</a></li>
		<li><a href="#3" class="link_slide3">3</a></li>
		<li><a href="#4" class="link_slide4">4</a></li>
		<li><a href="#5" class="link_slide5">5</a></li>	
		<li><a href="#6" class="link_slide6">6</a></li>	
		<li><a href="#7" class="link_slide7">7</a></li>			
	</ul>
<span id="hash" style="position:absolute;z-index:100;right:0%;"></span>
<div class="wraper_slides">
		<div class="slides">
			<div class="slide1 horizontal_slides">1</div>
			<div class="slide2 horizontal_slides right_transform">2</div>
			<div class="slide3 horizontal_slides right_transform">3</div>
			<div class="slide4 horizontal_slides right_transform">4</div>
			<div class="slide5 horizontal_slides right_transform">5</div>
		</div>
		<div class="slide6 vertical_slides bottom_transform">6</div>
		<div class="slide7 vertical_slides bottom_transform">7</div>
        
        
	</div>

CSS

*{
	font-size: 100px;
	color: #fff;
}

.wraper_slides{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}

.horizontal_slides{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
    z-index: 0;
}

.slide1{
	background: red;
	z-index: 1;
}

.slide2{
	background: green;
	z-index: 2;
}

.slide3{
	background: yellow;
	z-index: 3;
}

.slide4{
	background: black;
	z-index: 4;
}

.slide5{
	background: blue;
	z-index: 5;
}

.vertical_slides{
	position: absolute;
	width: 100%;
	height: 100%;	
}

.slide6{
	background: green;
    z-index: 6;
}

.slide7{
	background: blue;
    z-index: 7;
}

.left_transform{
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.right_transform{
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.bottom_transform{
	transform: translateY(100%);
	-webkit-transform: translateY(100%);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.top_transform{
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.nav{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99;
}

.nav li{
	float: left;
	list-style: none;
	color: #eee;
}

.no_visible{
	display: none;
}


*{
    transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
}

.active_nav{
	color: #ccc;
}

JavaScript

$(function(){
    var max_slide = $('.horizontal_slides, .vertical_slides').length;
    var hash = parseInt(window.location.hash.substr(1));
    if(isNaN(hash) || hash < 0 || hash > max_slide) hash = 1;
    window.location.hash = hash;
    
    $('.nav a').on('click', function(){
        old_link = $('.active_nav');
        new_link = $(this);
        old_href = parseInt($(old_link).attr('href').substr(1));
        new_href = parseInt($(new_link).attr('href').substr(1));
        $(old_link).removeClass('active_nav');
        $(new_link).addClass('active_nav');
        for(n=1;n<=max_slide;n++){
            if(n < new_href){
                if($('.slide'+n).hasClass('horizontal_slides')) $('.slide'+n)
                    .removeClass('right_transform')
                    .addClass('left_transform');
                if($('.slide'+n).hasClass('vertical_slides')) $('.slide'+n)
                    .removeClass('bottom_transform')
                    .addClass('top_transform');
            }
            if(n > new_href){
                if($('.slide'+n).hasClass('horizontal_slides')) $('.slide'+n)
                    .removeClass('left_transform')
                    .addClass('right_transform');
                if($('.slide'+n).hasClass('vertical_slides')) $('.slide'+n)
                    .removeClass('top_transform')
                    .addClass('bottom_transform');
            }
        }
        $('.slide'+new_href)
        .removeClass('right_transform')
        .removeClass('left_transform')
        .removeClass('top_transform')
        .removeClass('bottom_transform');
        $('#hash').html(window.location.hash);
    });
    
    $('.wraper_slides').on('mousewheel', function(event, delta){
        hash = parseInt(window.location.hash.substr(1));
        if(delta>0) new_hash = hash+1;
        else if(delta<0) new_hash = hash-1;
        if(new_hash < 1) new_hash = 0;
        if(new_hash > max_slide) new_hash = max_slide;
        window.location.hash =...