La presentación de diapositivas no funciona debido a js, pero no sé dónde está el problema. Cuando hago clic en class .right , la presentación de diapositivas debe ser tranlateX(-imgWidth) pero no sucede nada.
$(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>