0

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:

JSFiddle

5
  • Evite usar ferramentas externas como o fiddle, incorpore seu código à pergunta através do snippet. Ps.: </br> não existe, utilize <br>ou <br />. Ps².: você ainda tem uma div quebrada no seu html. Commented 14/03/2018 às 14:49
  • Ok @LeandroAngelo, esses foram erros na hora de copiar e colar o código...
    – Zulian
    Commented 14/03/2018 às 14:53
  • Não entendo muito de JS, mas vc pode tentar colocar um SetTimeOut nos botões. Aqui tem alguns links que podem te ajudar. google.com.br/…
    – hugocsl
    Commented 14/03/2018 às 15:14
  • você quer fazer isso com o propósito de estudo? eu usaria um carousel Commented 14/03/2018 às 16:01
  • Vou tentar inserir um SetTimeOut @hugocsl. Na verdade estou alterando algo já feito anteriormente de maneira bem básica @LeandroAngelo.
    – Zulian
    Commented 14/03/2018 às 18:00

1 Resposta 1

0

Consegui resolver de maneira bem simples, apenas adicionei uma variável boolean de controle que verifica se a operação está ativa ou não. Ex:

$(function(){

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

var count = 0;
var slideAtual;
var active = false; // <- variável criada

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

escondeSlides();
slideAtual = slides.eq(0);
slideAtual.fadeIn('fast');

function fazTrocaSlide(count) {

    console.log(count);
    slideAtual.fadeOut('fast', function(){
        slides.eq(count).fadeIn('fast', function(){
            slideAtual = slides.eq(count);
            active = false; // aqui no final das animações, reseto a variável
        });
    });

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

$('.seta-navegacao').on('click', function() {
    if (active) { // aqui verifico se há uma animação em andamento
        return;   // caso haja, o método para por aqui.

    }
    active = true; // torna-se ativa

    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);
});

$('.slide-navigation img').on('click', function() {
    count = $('.slide-navigation img').index(this);
    fazTrocaSlide(count);
});
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .