Стрелочки рядом с переключателяи пагинации в slick slider

В slick slider эти навинационные кнопки прописаны через абсолютное позиционирование. По структуре находятся в разных блоках с навигацией. Подгонять расположение кнопок помогало только при фиксированном кол-ве элементов в слайдере. Было решено что-то придумать, не особо костыльное, но чтобы четко работало.
Идея в следующем — на JavaScript'е обернуть элементы пагинации в дополнительный контейнер, в него же поместить элементы отвечающие за прокрутку влево и вправо.

Написал вот такую функцию:

setArrows = function(selector) {
    $(selector+" .slick-dots").wrap("<div class='slick-dots__wrapper'></div>");
    $(selector+" .slick-dots__wrapper").prepend('<span class="slick-dots-prev"></span>');
    $(selector+" .slick-dots__wrapper").append('<span class="slick-dots-next"></span>');
    $(selector+' .slick-dots-prev').on('click', function(){
        $(selector).slick('slickPrev');
    });
    $(selector+' .slick-dots-next').on('click', function(){
        $(selector).slick('slickNext');
    });
};

Добавляем ее к вызову инициализации слайдера

var main_product_slider = false;
initMainProductSlider = function() {
    selector = '.product-slider';
    if ($(window).width()<1050) {
        if (!main_product_slider) {
            $(selector).slick({
                'autoplay': false,
                'arrows': false,
                'dots': true,
                'slidesToShow': 3,
                'slidesToScroll': 1,
                'initialSlide': 1,
                'infinite': false,
                'adaptiveHeight': true,
                'responsive': [
                    {
                        breakpoint: 750,
                        settings: {
                            vertical: false,
                            dots: false,
                            slidesToShow:2
                        }
                    },
                    {
                        breakpoint: 450,
                        settings: {
                            vertical: false,
                            dots: true,
                            slidesToShow: 1
                        }
                    }
                ]
            });

            setArrows(selector);
            $(selector).on('breakpoint', function(event, slick, direction){
                setArrows(selector);
            });

            main_product_slider = true;
        }
    } else {
        if (main_product_slider) {
            $(selector).slick('unslick');
            main_product_slider = false;
        }
    }
};

Для правильного отображения стрелочек добавляем стили. Кусок из scss файла

.slick-dots{
      &__wrapper{
        position: absolute;
        bottom: -30px;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
        .slick-dots{
          position: relative;
          bottom: auto;
          display: inline-block;
          width: auto;
          line-height: 10px;
          vertical-align: middle;
        }
        .slick-dots-prev{
          height: 10px;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          cursor: pointer;
          margin-right: 4px;
          line-height: 10px;
          &:before{
            display: inline-block;
            content: "";
            @include sprite($arrow-slider);
            transform: rotate(180deg);
          }
        }
        .slick-dots-next{
          height: 10px;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          cursor: pointer;
          margin-left: 4px;
          line-height: 10px;
          &:before{
            display: inline-block;
            content: "";
            @include sprite($arrow-slider);
          }
        }
}