JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
				<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
					<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
					<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
				</div>
				<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
					
				</div>
				
				<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
					
				</div>
				
				<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
					
				</div>
			</div>

CSS

html{
    overflow: hidden; 
    width:100%;
}
div#slider{
	position:relative;
	overflow: hidden; 
	width: 300%;
	height:300px;
}

.slide{
	position:relative;
	width:33.3%;
	height:100%;
	float:left;
	background-size: cover;
	-webkit-transform: translateZ(0);
	-webkit-transition: margin-left 0.9s ease-out;
	-moz-transition: margin-left 0.9s ease-out;
	-o-transition: margin-left 0.9s ease-out;
	transition: margin-left 0.9s ease-out;
}

JavaScript

$(".sprite-slider_prox").on("click", function(){
	if($(".slide_ativo").next().is(".slide")){
		$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
	}
});

$(".sprite-slider_ant").on("click", function(){
	if($(".slide_ativo").prev().is(".slide")){
		$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
	}
});