Creé un carrusel usando 'Slick' pero quiero cambiar los botones 'Anterior' y 'Siguiente' en flechas. ¿Cómo puedo hacer eso?
Este es mi código:
$('.horizontal').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 100, }); #slider img { width: 350px; height: 350px; margin-right: 100px; } <section id="slider" style="background-color:#fefefe;height: 800px;"> <div class="horizontal"> <img src="images/imags/1.jpg" class="before_after"> <img src="images/imags/2.jpg" class="before_after"> <img src="images/imags/3.jpg" class="before_after"> <img src="images/imags/4.jpg" class="before_after"> <img src="images/imags/5.jpg" class="before_after"> <img src="images/imags/6.jpg" class="before_after"> <img src="images/imags/8.jpg" class="before_after"> <img src="images/imags/9.jpg" class="before_after"> <img src="images/imags/10.jpg" class="before_after"> <img src="images/imags/11.jpg" class="before_after"> <img src="images/imags/12.jpg" class="before_after"> <img src="images/imags/13.jpg" class="before_after"> <img src="images/imags/14.jpg" class="before_after"> <img src="images/imags/15.jpg" class="before_after"> <img src="images/imags/16.jpg" class="before_after"> </div> </section>Puede usar prevArrow y nextArrow para personalizar el código de sus flechas. Algo como esto:
$('.horizontal').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 100, prevArrow: '<button type="button" class="slick-custom-arrow slick-prev"> < </button>', nextArrow: '<button type="button" class="slick-custom-arrow slick-next"> > </button>' });Luego lo diseñas con css. Puede cambiar los elementos del botón a una a, o cualquier cosa que desee. También puede agregar las flechas en otro lugar, fuera de su carrusel, con appendArrows . Simplemente seleccione un elemento y páselo como parámetro.
var $element = $('.js-arrow-wrapper'); $('.horizontal').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 100, appendArrows: $element });