Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

97
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!