1

Hola tengo mi slider con puntos así

$('.slide_items').slick({
    dots: true,
    infinite:true,
    autoplay:true,
    autoplaySpeed: 2000,
    pauseOnHover: false,
    arrows: false,
});

y cuando corre hace focus en el DOT o posicion de la imagen en el que este, como puedo hacer que me marque los que ya recorrio tambien? es decir algo como esto

introducir la descripción de la imagen aquí

como ven esta en la imagen 4 y hay 4 puntos rellenos y los que faltan no estan rellenos, como puedo hacer esto?

2
  • Los puntos son también enlaces ¿Qué pasa si salto del 1 al 4 por ejemplo sin pasar por el 2 y 3? ¿Qué ocurre si vuelvo atrás? Eso que quieres hacer es un comportamiento un poco raro para un slider.
    – user7176
    Commented el 12 abr. 2019 a las 6:15
  • no, solo quiero que se coloreen los puntos que están detrás del que estoy haciendo focus, si voy del 1 al 4 se colorean 1,2,3 y el 4 que estoy haciendo focus Commented el 12 abr. 2019 a las 14:30

1 respuesta 1

0

Fácil, pues existe un evento llamado afterChange que como el nombre lo dice, se ejecuta después de que la "slide" cambia, entonces podrías usarlo a tu favor para lograr lo que quieres:

$('.slide_items').on('afterChange', function(event, slick, currentSlide, nextSlide){
   var i = 0;
   $('.slick-dots li').removeClass('active'); //remover la clase de active a todos para después agregársela a los que ya han pasado

   for(i = 0; i < (currentSlide + 1); i++){
      $('.slick-dots li').eq(i).addClass('active');
   }
});

Y ya en tu css podrías hacer lo siguiente, por ejemplo:

.slick-dots li{
   background-color: #000;
   opacity: 0.6;
}

.slick-dots li.active{
   background-color: #000;
   opacity: 1;
}

Claro que los estilos tu los puedes manejar de la forma que quieras y necesites, solo fue un ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.