Add custom buttons on Slick Carousel

Question

How do I apply custom prev and next buttons to slick carousel? I have tried a background image on the .slick-prev and .slick-next css classes. I have also tried adding a new class as per the documentation but the arrows disappeared completely:

<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> 

Any pointers would be appreciated.

Answer 1

I know this is an old question, but maybe I can be of help to someone, bc this also stumped me until I read the documentation a bit more:

prevArrow string (html|jQuery selector) | object (DOM node|jQuery object) Previous Allows you to select a node or customize the HTML for the "Previous" arrow.

nextArrow string (html|jQuery selector) | object (DOM node|jQuery object) Next Allows you to select a node or customize the HTML for the "Next" arrow.

this is how i changed my buttons.. worked perfectly.

  $('.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'>"   });