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.

That's because they use an icon font for the buttons, you need to replace the whole button code. Or you can go here http://fontastic.me/ and create your own icon font — mrpinkman, Mar 13 '15 at 23:32
I just made a more complete anwser, mark it as correct to help improve Stack Overflow — mrpinkman, Mar 14 '15 at 21:56

score 91 · Accepted Answer · edited Aug 10 '16 at 10:31

91

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

edited Aug 10 '16 at 10:31

Remco Beugels

1,075
1
11
21

answered Jun 22 '15 at 20:48

tallgirltaadaa

1,864
15
26

you do not need the css class for the image, slick slider will add a class for handling the click action – guido _nhcol.com.br_ Nov 15 '17 at 17:04
I have tried this, but it's not working. Actually, I am using slick by cdn links, so could this be the reason that I am not able to use my own customization – Siddharth Choudhary Mar 15 '18 at 05:47

score 20 · Answer 2 · answered Jul 14 '17 at 14:30

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: '<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')
    });
});

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?

My company has been using slick for years and no one knew we could place our own buttons in the dom. We've been annoyingly using position:absolute; with your first example for far too long. Thank you for this! — Brandi Evans, Mar 09 '20 at 18:08

score 11 · Answer 3 · answered Jun 17 '16 at 20:31

if you want to use icons from any icon font library, you can try this in the option while calling the slider in your js file.

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

Here "fa" comes from FontAwesome icon font library.

score 6 · Answer 4 · answered Mar 09 '16 at 23:31

6

If you're using Bootstrap 3, you can use the Glyphicons.

.slick-prev:before, .slick-next:before {
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 40px;
}

.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }

answered Mar 09 '16 at 23:31

Yes Barry

8,896
4
43
63

1

worked for me but because of font size I had to additionaly add `.slick-prev, .slick-next { width: 40px; height: 40px; }` – Alexandru Trandafir Catalin Oct 18 '17 at 17:51

score 3 · Answer 5 · answered Mar 14 '15 at 00:08

Why you cant use default CSS classes and add some your style?

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

and

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

Are you used simple background css property?

in example: http://jsfiddle.net/BNvke/1/

You can use Font Awesome too. Don't forget about CSS pseudo elements.

And don't forget jQuery, you can replace elements, add classes, etc.

Buck3000 · Answer 6 · 2017-08-24T19:53:20.540

3

This worked for me when a lot of these other items did not:

.slick-prev:before {
  content: url('your-arrow.png');
}
.slick-next:before {
  content: url('your-arrow.png');
}

edited Aug 24 '17 at 19:53

answered Aug 24 '17 at 19:46

Buck3000

81
9

score 2 · Answer 7 · answered Jan 27 '17 at 13:21

If you are using sass you can simply set below mentioned variables to use icons provided by other fonts,

$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";

These will change the font family used by slick's theme css and also the unicode for prev and next button. This example will use FontAwesome's chevron-left and chevron-right icons.

Other sass variables which can be configured are given in Slick Github page

score 1 · Answer 8 · answered Mar 14 '15 at 21:55

That's because they use an icon font for the buttons. They use "Slick" font as you can see in this image:

enter image description here

Basically, the make the letter "A" the form of an icon, the letter "B" the form of another one and so on.

For example:

enter image description here

If you want to know more about icon fonts click here

If you want to change the icons, you need to replace the whole button code or you can go to www.fontastic.me and create your own icon font. After that, replace the font file for the current one and you'll have your own icon.

score 1 · Answer 9 · answered Jun 01 '17 at 15:25

its very easy. Use the bellow code, Its works for me. Here I have used fontawesome icon but you can use anything as image or any other Icon's code.

$(document).ready(function(){
    $('.slider').slick({
        autoplay:true,
        arrows: true,
        prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
        nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
    });
});

mhenry1384 · Answer 10 · 2017-01-29T05:51:49.417

A variation on the answer by @tallgirltaadaa , draw your own button in the shape of a caret:

var a = $('.MyCarouselContainer').slick({
    prevArrow: '<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>',
    nextArrow: '<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>'
});

function drawNextPreviousArrows(strokeColor) {
    var c = $(".prevArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(15, 0);
    ctx.lineTo(0, 25);
    ctx.lineTo(15, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    var c = $(".nextArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(0, 0);
    ctx.lineTo(15, 25);
    ctx.lineTo(0, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}
drawNextPreviousArrows("#cccccc");

then add the css

.slick-prev, .slick-next 
    height: 50px;s
}

score 0 · Answer 11 · answered Nov 25 '20 at 06:07

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  speed: 500,
  dots: true,
  arrows: true,
  centerMode: false,
  focusOnSelect: false,
  autoplay: false,
  autoplaySpeed: 2000,
  slide: 'div',  
    nextArrow: '<button id="next">Next >',
        prevArrow: '<button id="previous">previous >',  
    
  
});

Result :

Add custom buttons on Slick Carousel

11 Answers11

Linked