JSFiddle - React, Tailwind, and code Playground

by Camila Marqui

HTML

<div id="infografico">
<nav><li><a href="#" id="anterior" class="">voltar</a></li><li><a href="#" id="proximo" class="irparaslide02">ir</a></li></nav>
<div id="imagem"></div>
<div class="box01">box de texto 01</div>

CSS

*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#infografico{width:100%;overflow:hidden;position:relative}
nav{position: absolute;top: 50%;width: 100%;}
nav #anterior{position:absolute; top:50%; left:5%; background-color:#fff}
nav #proximo{position:absolute; top:50%; right:5%; background-color:#fff}
#imagem{background:url(http://kgbm.com.au/wp-content/uploads/2016/02/sydney1a-wide.jpg) 0px 0px no-repeat; width:2000px; height:400px}
.move01para02{animation-name:move01para02;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move01para02{
0% {background-position: 0px}
100%{ background-position: -200px}
}
.move02para01{animation-name:move02para01;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move02para01{
0% {background-position: -200px}
100%{ background-position: 0px}
}
.show{width:30px; height:30px; background-color:#000}
.move02para03{animation-name:move02para03;animation-duration:1s;animation-timing-function:ease-in, ease-in-out;animation-fill-mode:forwards;}
@keyframes move02para03{
0% {background-position: -200px}
100%{ background-position: -400px}
}
.show{width:30px; height:30px; background-color:#000}
.box01{background:#fff;color:#000; position:absolute; top:20px; left:200px}

JavaScript

$(document).ready(function() {
	$(".box01").hide();
	$(".irparaslide02").click(function() {
		$('#imagem').addClass('move01para02');
		$("#proximo").removeClass('irparaslide02').addClass('irparaslide03');
		$("#anterior").addClass('move02para01');

		$(".irparaslide03").click(function() {
			$('#imagem').removeClass('move01para02').addClass('move02para03');
			$("#proximo").removeClass('irparaslide03').addClass('irparaslide04');
			$(".box01").show(slow);
			
		});
	});
});