rorykoehler rorykoehler - 24 days ago 6
CSS Question

Add custom buttons on Slick Carousel

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

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.