Estoy usando un control deslizante elegante y el sitio web en el que estoy trabajando necesita tener un control deslizante que tenga controles dentro del contenido de la diapositiva. Logré agregar flechas en el div ".controls" y luego agregar puntos entre los botones de flechas. Al principio parecía que todo funcionaba bien, pero noté que los puntos no se comportan correctamente. Solo la primera diapositiva tiene puntos completamente funcionales que cambian de color al cambiar de diapositiva. ¿Cómo puedo hacer puntos en otras diapositivas para cambiar de color también?

Cómo se ve: Primera diapositiva: el color de los puntos indica la primera diapositiva Segunda diapositiva: todos los puntos en la segunda diapositiva son blancos

 <div class="slick-slider"> <div class="slide"> <div class="wrapper text"> <h3></h3> <h4></h4> <p></p> <div class="controls"> <button type="button" class="prev-slide"></button> <div class="dots"></div> <button type="button" class="next-slide"></button> </div> </div> </div> </div> $(document).ready(function(){ $('.slick-slider').slick({ dots: true, infinite: true, speed: 500, fade: true, cssEase: 'linear', appendDots: $('.dots'), prevArrow: $('.prev-slide'), nextArrow: $('.next-slide') }); });

No puedo entender por qué los puntos en otras diapositivas no tienen la clase ".slick-active" en ellos.