JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Conteneur-Central">
	<div id="wrapper">
		<section id="un">
			<p>1</p>
			<a href="#"><span>nul</span></a><a href="#deux"><span>Suivant</span></a>
		</section><!--
	 --><section id="deux">
	 		<p>2</p>
			<a href="#un"><span>Précédent</span></a><a href="#trois"><span>Suivant</span></a>
	 	</section><!--
	 --><section id="trois">
	 		<p>3</p>
			<a href="#deux"><span>Précédent</span></a><a href="#quatre"><span>Suivant</span></a>
	 	</section><!--
	 --><section id="quatre">
	 		<p>4</p>
			<a href="#trois"><span>Précédent</span></a><a href="#cinq"><span>Suivant</span></a>
	 	</section><!--
	 --><section id="cinq">
	 		<p>5</p>
			<a href="#quatre"><span>Précédent</span></a><a href="#"><span>nul</span></a>
	 	</section>
	</div>
</div>

CSS

html, body {height:100%;}
html, body, section, p {margin:0;}
#Conteneur-Central {overflow:hidden;height:100%;}
#wrapper {white-space:nowrap;height:100%;}
#Conteneur-Central section {position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;color:#fff;transition:margin-left 1s ease;}
#Conteneur-Central section:nth-child(1) {background:#0099CC;}
#Conteneur-Central section:nth-child(2) {background:#12D05F;}
#Conteneur-Central section:nth-child(3) {background:#CC3029;}
#Conteneur-Central section:nth-child(4) {background:#FFC02A;}
#Conteneur-Central section:nth-child(5) {background:#CC3D91;}
#Conteneur-Central p {overflow:hidden;position:relative;top:45%;text-align:center;font:500% sans-serif;}
#Conteneur-Central a span {font-size:0 !important;color:transparent !important;}
#Conteneur-Central p+a:before {content:"«";left:2%;}
#Conteneur-Central a+a:before {content:"»";right:2%;}
#Conteneur-Central p+a:before, #Conteneur-Central a+a:before {position:absolute;width:60px;height:60px;top:50%;margin-top:-20px;text-align:center;font:250%/53px sans-serif;border-radius:30px;color:#333;background:#fff;}
#Conteneur-Central a[href="#"] {display:none;}

JavaScript

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
function elementIndex(a,b){for(var i=0, l=a.length; i<l; i++){if (a[i]===b) return i;}}

var navLinks = document.querySelectorAll("#Conteneur-Central section a"),
	allSections = document.querySelectorAll("#Conteneur-Central section"),
	firstSection = document.querySelector("#Conteneur-Central>div>section:first-child"),
	currentIndex = 0, clicked = false;


function scrollSection(e){
	(e.stopPropagation()) ? e.stopPropagation() : e.cancelBubble;
	(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);

	var cur = e.target || e.srcElement,
		positionMaxDebut = (currentIndex == 0 && (e.detail < 0 || e.wheelDelta > 0 || e.keyCode == 37 || e.keyCode == 38)),
		positionMaxFin = (currentIndex == allSections.length-1  && (e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40) && !clicked),
		toucheNonGeree = e.keyCode < 37 || e.keyCode > 40;
	
	if (positionMaxDebut || positionMaxFin || toucheNonGeree) return;

	var	scrollNext = e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40,
		targetElement = clicked ? document.getElementById(cur.hash.substring(1)) : allSections[scrollNext ? currentIndex+1 : currentIndex-1],
		targetIndex = elementIndex(allSections, targetElement);

	currentIndex = targetIndex;
	clicked = false;
	
	firstSection.style.marginLeft = "-"+ (currentIndex * 100) + '%';
}


for(var i=0, l=navLinks.length; i<l; i++){
	addEvent(navLinks[i], "click", function(e){
		clicked = true;
		scrollSection(e);
	}, false);
}

addEvent(document, "DOMMouseScroll", scrollSection, false);
addEvent(document, "mousewheel", scrollSection, false);
addEvent(document, "keyup", scrollSection, false);