JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide-wrapper">
	<img id="seta-esquerda" class="seta-navegacao" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-64.png">

	<div class="slide-vinho">
		<div class="texto-esquerda">
			<h2>
				Merlot
			</h2>
			<div class="descricao">
				<p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p> </br>
				<p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
				<a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
			</div>
		</div>
		<img class="garrafa-vinho" src="http://via.placeholder.com/150x300" alt="merlot-riguardo">
		<div class="texto-direita">
			<ul>
				<li>
					<img class="icon" src="http://via.placeholder.com/50x50"> 100% Merlot
				</li>
				<li>
					<img class="icon" src="http://via.placeholder.com/50x50"> 2012 | 2013
				</li>
				<li>
					<img class="icon" src="http://via.placeholder.com/50x50"> Nítido | Varietal
				</li>
				<li>
					<img class="icon" src="http://via.placeholder.com/50x50"> Frutas vermelhas | Especiarias
				</li>
				<li>
				<img class="icon" src="http://via.placeholder.com/50x50"> Rubi intenso
				</li>
			</ul>
		</div>
	</div>

		<div class="slide-vinho">
		<div class="texto-esquerda">
			<h2>
				Merlot
			</h2>
			<div class="descricao">
				<p>Com elegância, complexidade e personalidade própria, expressas pelo terroir dos Campos de Cima da Serra, esse tinto é vinificado com leve passagem por barricas de carvalho francês. </p> </br>
				<p>Uvas cuidadosamente selecionadas em colheita manual, cultivados em espaldeira com produção máxima de 1,5 kg por planta.</p>
				<a href="#"><button class="btn-baixar-ficha">Ficha técnica</button></a>
			</div>
		</div>
		<img class="garrafa-vinho" src="http://via.placeholder.com/150x300" alt="merlot-riguardo">
		<div...

CSS

.garrafa-vinho {
	height: 680px;
}

.slide-vinho {
	display: flex;
	flex-wrap: nowrap;
}

.slide-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../img/fundo-vinhos.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 50%;
}

.texto-esquerda {
	position: relative;
	width: 50%;
	text-align: right;
	padding-top: 70px;
	padding-right: 16px;
}

.texto-esquerda h2 {
	font-family: 'Copperplate Gothic';
	font-weight: bold;
}

.descricao {
	position: absolute;
   	top: 50%;
	padding-left: 30%;
	padding-right: 16px;
	text-align: justify;
	text-indent: 20px;
	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.texto-direita {
	align-self: center;
	width: 50%;
	line-height: 60px;
}

.icon {
	width: 42px;
	height: 42px;
	vertical-align: middle;
	margin-left: 16px;
	margin-right: 6px;
}

#seta-esquerda {
	width: 56px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
  	margin-left: 40px;
  	transition: background-color .35s ease-in-out;
    -moz-transition: background-color .35s ease-in-out;
    -webkit-transition: background-color .35s ease-in-out;
    z-index: 2;
}

#seta-esquerda:hover {
	cursor: pointer;
}

#seta-direita {
	width: 56px;
	position: absolute;
	top: 50%;
	right: 0;
	margin-right: 40px;
	-webkit-transform: translateY(-50%);
  	transform: translateY(-50%);
  	transition: background-color .35s ease-in-out;
    -moz-transition: background-color .35s ease-in-out;
    -webkit-transition: background-color .35s ease-in-out;
}

#seta-direita:hover {
	cursor: pointer;
}

.slide-navigation {
	position: relative;
	display: flex;
	justify-content: space-around;
	background-color: #261a0b;
}

.slide-navigation > img {
	 transition: opacity .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out;
    -webkit-transition: opacity .35s ease-in-out;

	z-index: 1;
}

.slide-navigation > img:hover {
	cursor:...

JavaScript

$(function(){

var slides = $('.slide-vinho');

var count = 0;
var slideAtual = slides.eq(0);

function escondeSlides(count) {
	for (var aux = 0; aux < slides.length; aux++) {
		if (aux != count) {
			slides.eq(aux).hide();
		}
	}
}

escondeSlides(0);

function fazTrocaSlide(count) {
	console.log(count);
	slideAtual.stop(true, true).fadeOut('fast', function(){
   		slides.eq(count).stop(true, true).fadeIn('fast', function(){
   			slideAtual = slides.eq(count);
   		});
   	});

	var valorLeftBox = (count) * 14.28;
	$('#background-box-navigation').animate({
		left: valorLeftBox+'%'}, 'fast');
	valorLeftBox = 0;
};

$('.seta-navegacao').off().stop(true, true).on('click', function() {
	var whichButton = $(this).attr('id');

	if (whichButton == "seta-direita") {
		count++;
		if (count > slides.length-1) {
			count = 0;
		}
	} else {
		count--;
		if (count < 0) {
			count = slides.length-1;
		}
	}
	fazTrocaSlide(count);
});

});