Estou me aventurando no front-end e estou com um problema com cliques múltiplos seguidos nas setas laterais do "slide" que criei, onde se o usuário esperar mais ou menos um segundo para passar para o próximo slide tudo ocorre certo, porém, se clicar rapidamente a transição buga e uma nova div
é adicionada embaixo da existente. Já tentei utilizar off()
e stop(true, true)
mas não adiantou.
$(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);
});
});
.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: pointer;
opacity: 0.5;
}
#background-box-navigation {
position: absolute;
width: 14.28%;
height: 100%;
left: 0;
background-color: #975032;
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 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 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 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 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 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 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>
<img id="seta-direita" class="seta-navegacao" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-64.png" alt= "seta_direita">
</div>
<div class="slide-navigation">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<img src="http://via.placeholder.com/50x100">
<div id="background-box-navigation"></div>
</div>
Com certeza deve haver maneiras melhores de fazer isso e aceito sugestões. Segue o fiddle:
</br>
não existe, utilize<br>
ou<br />
. Ps².: você ainda tem uma div quebrada no seu html.SetTimeOut
@hugocsl. Na verdade estou alterando algo já feito anteriormente de maneira bem básica @LeandroAngelo.