Tengo varios controles deslizantes en mi página y el problema es que las flechas personalizadas que hice solo funcionan para el control deslizante no. 2, por ejemplo, puedo presionar flechas en el control deslizante no. 1 o 3, pero cambiará las imágenes en los controles deslizantes no. 2.

aquí está el código:

 **<section id="slideshow"> <div class="slick"> <div><img src="pic.jpg" ></div> <div><img src="pic2.jpg" ></div> <div><img src="pic3.jpg"></div> <div> <div class="arrow-prev"> <span><i class="fas fa-angle-double-left"></i></span> </div> <div class="arrow-next"> <span><i class="fas fa-angle-double-right"></i></span> </div> </section>** <script> $(document).ready(() => { $('.slick').slick({ //autoplay: true, fade: true, dots: false, speed: 2000, autoplaySpeed: 100, pauseOnHover: true, arrows: true, prevArrow: $('.arrow-prev'), nextArrow: $('.arrow-next') }) }) </script>

¿Alguna idea sobre cómo resolver el problema?