Change the Arrow buttons in Slick slider

Slick has a very easy way to customize its buttons through two variables in its own configuration: prevArrow and nextArrow.

Both types are: string (html | jQuery selector) | object (DOM node | jQuery object), so in your settings slick slider you can set the classes:

prevArrow: $('.prev')nextArrow: $('.next')

and add to these elements the styles you want.

For example:

//HTML<div class="slider-box _clearfix">    <div class="slick-slider">        <div>            <img src="img/home_carousel/home_carorusel_1.jpg">        </div>        <div>            <img src="img/home_carousel/home_carorusel_2.jpg">        </div>        <div>            <img src="img/home_carousel/home_carorusel_3.jpg">        </div>        <div>            <img src="img/home_carousel/home_carorusel_4.jpg">        </div>    </div></div><div class="paginator-center text-color text-center">    <h6>VER MAS LANZAMIENTOS</h6>    <ul>        <li class="prev"></li>        <li class="next"></li>    </ul></div>//JS$(document).ready(function () {  $('.slick-slider').slick({      centerMode: true,      centerPadding: '60px',      slidesToShow: 3,      prevArrow: $('.prev'),      nextArrow: $('.next'),});//CSS.paginator{  position: relative;  float: right;  margin-bottom: 20px;  li{    margin-top: 20px;    position: relative;    float: left;    margin-right: 20px;    &.prev{      display: block;      height: 20px;      width: 20px;      background: url('../img/back.png') no-repeat;    }    &.next{      display: block;      height: 20px;      width: 20px;      background: url('../img/next.png') no-repeat;    }  }}

You can easily create your own style of arrow with the .slick-next:before and the .slick-prev:after pseudo-classes.

Here's an example:

.slick-prev:before {  content: "<";  color: red;  font-size: 30px;}.slick-next:before {  content: ">";  color: red;  font-size: 30px;}

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