how to make slideshow with jquery

Question

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>