How can I create full screen slides

Question

Can someone help me to create full screen slides exactly like following website... Browser scrollbar is hidden, when scroll up/down or press up/down key slides moves to next screen and active dot changed as per slide.

http://vaalentin.github.io/2015/

$("nav a").click(function() {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 1000);
});

* {
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	body {
		margin: 0px;
		overflow: hidden;
	}
	.box {
		display: table;
		width: 100vw;
		height: 100vh;
	}
	.box { background-color: rgb(179, 235, 255); }
	.box + .box { background-color: rgb(217, 255, 228); }
	.box + .box + .box { background-color: rgb(255, 221, 255); }
	.box + .box + .box + .box { background-color: rgb(255, 190, 190); }
	.box + .box + .box + .box + .box { background-color: rgb(253, 176, 255); }
	.box + .box + .box + .box + .box + .box { background-color: rgb(0, 26, 73); color: #fff; }
	.box + .box + .box + .box + .box + .box + .box { background-color: rgb(23, 0, 4); }

	.inner {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		font-size: 1vw;
	}
	nav {
		position: fixed;
		z-index: 999;
		top: 50%;
		right: 20px;
	}
		nav a:link,
		nav a:visited {
			display: block;
			width: 10px;
			height: 10px;
			margin-bottom: 10px;
			cursor: pointer;
			background-color: #222;
			border-radius: 50%;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<a href="#home"></a>
	<a href="#services"></a>
	<a href="#team"></a>
	<a href="#work"></a>
	<a href="#process"></a>
	<a href="#faq"></a>
	<a href="#contact"></a>
</nav>

<div id="home" class="box">
	<div class="inner">
		<h1>Home</h1>
	</div>
</div>

<div id="services" class="box">
	<div class="inner">
		<h1>Services</h1>
	</div>
</div>

<div id="team" class="box">
	<div class="inner">
		<h1>Team</h1>
	</div>
</div>

<div id="work" class="box">
	<div class="inner">
		<h1>Recent Work</h1>
	</div>
</div>

<div id="process" class="box">
	<div class="inner">
		<h1>Process</h1>
	</div>
</div>

<div id="faq" class="box">
	<div class="inner">
		<h1>FAQ</h1>
	</div>
</div>

<div id="contact" class="box">
	<div class="inner">
		<h1>Contact</h1>
	</div>
</div>

Answer 1

Look at impress.js it gives you an already working framework, you just have to compose the elements.

https://github.com/bartaz/impress.js/

EDIT

Other framework is fullPage.js

https://github.com/alvarotrigo/fullPage.js