Как кастомизировать стрелки next/prev у слайдера Slick?

Question

[buzzloud]

Всем привет, помогите разобраться со стилизацией стрелок всем известного слайдера Slick. Вопрос в том, как можно заменить дефолтные стрелки на "свои" вырезанные из psd макета + как их разместить не по бокам слайдера, а, например, вверху и друг возле друга.
Да, в настройках этого плагина есть описание prevArrow и nextArrow, которые "Allows you to select a node or customize the HTML for the "Previous" arrow". Но какие шаги именно нужно предпринять не сильно понятно( Любой совет или где можно почитать об этом - welcome!
Скрипт такого вида:

$(document).ready(function(){
      $('.sm-slider').slick({
        infinite: true,
        dots: true,
//        autoplay: true,
        slidesToShow: 4,
        slidesToScroll: 4
      });
    });

Answer 1

[Dumb]

Вам уже наверное не актуально, но может пригодится другим.
Js

$(function(){
    	$('.your-class').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            appendArrows: $('.your-class-arrow'),
            prevArrow: '<button id="prev" type="button" class="btn btn-juliet"><i class="fa fa-chevron-left" aria-hidden="true"></i> Туда</button>',
            nextArrow: '<button id="next" type="button" class="btn btn-juliet">Сюда <i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
    	});
    });

Html

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
<div class="your-class-arrow"></div>

В данном случае кнопки будут под слайдером. Остальное через css.

Answer 2

[sergey]

Вот slick responsive кастомизированые стрелки (мой вариант):

$('.responsive').slick({
        dots: false,
        arrows: true,
        nextArrow: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
        prevArrow: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
        infinite: false,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 3,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: false,
                    arrows: true,
                    dots: false
                }
            },
            {
                breakpoint: 700,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }