¿Cómo aplico los botones anterior y siguiente personalizados al carrusel elegante? He probado una imagen de fondo en las clases CSS .slick-prev y .slick-next . También intenté agregar una nueva clase según la documentación, pero las flechas desaparecieron por completo:
<script type="text/javascript"> $('.big-image').slick({ dots: false, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true, nextArrow: '.next_caro', prevArrow: '.previous_caro' }); </script>Cualquier indicador sería apreciada.
Sé que esta es una vieja pregunta, pero tal vez pueda ser de ayuda para alguien, porque esto también me dejó perplejo hasta que leí la documentación un poco más:
cadena prevArrow (html|selector jQuery) | objeto (nodo DOM|objeto jQuery) Anterior Le permite seleccionar un nodo o personalizar el HTML para la flecha "Anterior".
cadena nextArrow (html|selector jQuery) | objeto (nodo DOM|objeto jQuery) Siguiente Le permite seleccionar un nodo o personalizar el HTML para la flecha "Siguiente".
así es como cambié mis botones... funcionó perfectamente.
$('.carousel-content').slick({ prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>", nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" });flecha anterior/flecha siguiente
Tipo:
string (html|jQuery selector) | object (DOM node|jQuery object)
Algún código de ejemplo
$(document).ready(function(){ $('.slick-carousel-1').slick({ // @type {string} html nextArrow: '<button class="any-class-name-you-want-next">Next</button>', prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>' }); $('.slick-carousel-2').slick({ // @type {string} jQuery Selector nextArrow: '.next', prevArrow: '.previous' }); $('.slick-carousel-3').slick({ // @type {object} DOM node nextArrow: document.getElementById('slick-next'), prevArrow: document.getElementById('slick-previous') }); $('.slick-carousel-4').slick({ // @type {object} jQuery Object nextArrow: $('.example-4 .next'), prevArrow: $('.example-4 .previous') }); });Una pequeña nota sobre el estilo.
Una vez que Slick conoce sus nuevos botones, puede diseñarlos al contenido de su corazón; mirando el ejemplo anterior, puede orientarlos según el nombre de class , el nombre de id o incluso el element .
si desea usar íconos de cualquier biblioteca de fuentes de íconos, puede probar esto en la opción mientras llama al control deslizante en su archivo js.
prevArrow: '<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>', nextArrow: '<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>'Aquí "fa" proviene de la biblioteca de fuentes de iconos FontAwesome.