Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

110
Visualizações
how to make slideshow with jquery

The slide show is not working because of js but I don't know where is wrong. When I click on class .right, the slideshow must be tranlateX(-imgWidth) but nothing happens.

$(document).ready(function() {
  const imgWidth = $('.slider__item--img').width();
  let index = 1;
  $('.right').click(function() {
    $('.slider__item').css({
      'transform': `'translateX(${-1 * index * imgWidth}px)'`
    });
    index++;
    if (index == 3) {
      index = 1;
    }
  });

  // $('.left').click(function() {
  //     if (index == 1) {
  //         index = 3
  //         $('slide__item').style = `transform: translateX(${-1 * index * imgWidth}px)`
  //         index--;
  //     }
  // });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
//html

<div class="slider">
  <div class="slider__slideshow">
    <div class="slider__button">
      <i class="fa-solid fa-angle-left left"></i>
      <i class="fa-solid fa-angle-right right"></i>
    </div>
    <div class="slider__item">
      <div class="slider__item--img">
        <img src="https://us.novritsch.com/wp-content/uploads/2021/05/sniper.jpg" alt="">
      </div>

      <div class="slider__item--img">
        <img src="https://eu.novritsch.com/wp-content/uploads/2021/05/camo-slider-1536x676.jpg" alt="">
      </div>

      <div class="slider__item--img">
        <img src="https://eu.novritsch.com/wp-content/uploads/2021/05/a3-slider-1536x676.jpg" alt="">
      </div>

      <div class="slider__item--img">
        <img src="https://eu.novritsch.com/wp-content/uploads/2021/05/ssp1-slider-1536x676.jpg" alt="">
      </div>
    </div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda