Quiero usar un enlace para ir a una determinada diapositiva dentro de un control deslizante elegante.
Por el momento estoy usando el siguiente código para eso (Puedes verlo aquí: https://codepen.io/cray_code/pen/xxPRLKK ):
<div class="slider slider-for"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> </div> <div class="action"> <a href="#" data-slide="3">go to slide 3</a> <a href="#" data-slide="4">go to slide 4</a> <a href="#" data-slide="5">go to slide 5</a> </div>Y este código JS:
$('.slider').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, }); $('a[data-slide]').click(function(e) { e.preventDefault(); var slideno = $(this).data('slide'); $('.slider').slick('slickGoTo', slideno - 1); }); Funciona bien para saltar hacer una determinada diapositiva. Pero necesito marcar la diapositiva actual dentro de la navegación como activa y agregar una clase .active al enlace.
¿Es eso posible?
Sé que hay una cosa como la sincronización del control deslizante con asNavFor . Pero no puedo usar eso en mi caso.
Puede agregar una clase activa al hacer clic en esos elementos de navegación. Puedes verlo aquí https://codepen.io/sifat009/pen/VwrmzPm
Aquí está el código que he cambiado.
$('.slider').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, }); $('a[data-slide]').click(function(e) { e.preventDefault(); var slideno = $(this).data('slide'); $('.slider').slick('slickGoTo', slideno - 1); $('a[data-slide]').removeClass('active'); this.classList.add('active'); });