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 ha

Answer 1

From the docs

prevArrow/nextArrow

Type: string (html|jQuery selector) | object (DOM node|jQuery object)

Some example code

$(document).ready(function(){
    $('.slick-carousel-1').slick({
        // @type {string} html
        nextArrow: 'Next',
        prevArrow: 'Previous'
    });

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

A little note on styling

Once Slick knows about your new buttons, you can style them to your heart's content; looking at the above example, you could target them based on class name, id name or even element.

Did somebody say JSFiddle?