Bug transition Jquery slides

Asked

Viewed 40 times

0

I’m venturing into the front-end and I’m having a problem with multiple clicks in a row on the side arrows of the "slide" that I created, where if the user waits a second or so to move on to the next slide everything goes right, however, if you quickly click the transition div is added below the existing one. I have tried using off() and stop(true, true) but it didn’t help.

$(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>

Surely there must be better ways to do this and I accept suggestions. Follow the fiddle:

Jsfiddle

javascript jquery

  • Avoid using external tools like fiddle, enter your code into the question via snippet. Ps.: </br> does not exist, use <br>or <br />. Ps²: you still have a broken div in your html.

  • OK @Leandroangelo, these were errors when copying and pasting the code...

  • I don’t know much about JS, but you can try putting a Settimeout on the buttons. Here are some links that can help you. https://www.google.com/search?q=settimeout+button+slider+site:stackoverflow.com&newwindow=1&sa=X&ved=0ahUKEwjgsbeZjezZAhXDD5AKHTGKCUkQrQIINCgEMAA&biw=1280&bih=893

  • you want to do this for the purpose of study? I would use a Carousel

  • I’ll try to insert a SetTimeOut @hugocsl. I’m actually changing something I’ve done before in a very basic way @Leandroangelo.

1 answer

0


I managed to solve it very simply, I just added a variable boolean control that checks whether the operation is active or not. 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);
});
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.