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

Для слайдеров/каруселей нравится использовать slick slider. Самая большая его ценность в умении делать зависимые карусели. Эта особенность делает его очень гибким для внедрения в верстку.
Однако есть и несколько проблем в его использовании. Например, при адаптивной верстки у него проблемы с перезапуском. Например, в десктопном исполнении нам не нужен слайдер, а должны выводится только несколько изображений. При постепенном уменьшении размера браузера должен активироваться слайдер, и потом уменьшаться кол-во видимых слайдов. При увеличении экрана — процесс в обратном порядке. В десктопе слайдер должен отключиться.
Как я понял, это должно было работать так

$('.proekt__list').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	dots: true,
	arrows: true,
	centerPadding: '0px',
	centerMode: true,
	focusOnSelect: true,
	adaptiveHeight: true,
	responsive: [{
		breakpoint: 99999,
		settings: "unslick"
	}, {
		breakpoint: 768,
		settings: {
			slidesToShow: 1,
			arrows: true,
		}
	}, {
		breakpoint: 374,
		settings: {
			slidesToShow: 1,
			arrows: false,
		}
	}]
});

И оно работает при первом запуске, но стоит несколько раз изменить размер окна браузера — и все перестает нормально работать.

Пришел к такому виду вызова slick слайдера как оптимальному (ИМХО). Так как не работает нормально параметр unslick.

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
                        }
                    }
                ]
            });
            main_product_slider = true;
        }
    } else {
        if (main_product_slider) {
            $(selector).slick('unslick');
            main_product_slider = false;
        }
    }
};

Добавляю вызов функции при загрузке страницы

$(function() {
  initMainProductSlider();
});

Вешаю выполнение на resize страницы

var doresizepage;
$(window).resize(function(){
    clearTimeout(doresizepage);
    doit = setTimeout(resizepage, 100);
});
function resizepage(){
    initMainProductSlider('.product-slider');
}

Я использую вот эту github.com/RobinHerbots/Inputmask
Для подключения понадобиться 1 файл

<script src="assets/template/vendor/jquery.inputmask.bundle.js"></script>

Инициализацию выполняю так:

$(function() {
    $('[data-mask]').each(function() {
        input = $(this);
        mask = input.attr('data-mask');
        input.inputmask({"mask": mask});
    });
});

В разметке у нужного инпута добавляю аттрибут data-mask и прописываю нужный формат. Например так:

<input type="text" data-mask="+7 (999) 999-99-99" class="result-form__input" placeholder="Телефон">

В последнее время стал делать переход через аттрибут тегов. Таким образом не привязываюсь к классу или айдишнику, который могут поменять.
В разметке выглядит таким образом

<div class="header__menu">
    <ul>
        <li><a href="#" data-goto=".about">О компании</a></li>
        <li><a href="#" data-goto=".structure">Наш сервис</a></li>
        <li><a href="#" data-goto=".benefit">Ваши выгоды</a></li>
        <li><a href="#" data-goto=".location">Контакты</a></li>
    </ul>
</div>

Понятно, что можно обращаться через селектор по своему усмотрению, например, к id элемента вот так:

<a href="#" data-goto="#footer">Контакты</a>

Обработчик этого события у меня имеет вот такой вид:

$(function() {
    $('body').on('click', '[data-goto]', function(e) {
        e.preventDefault();
        var selector = $(this).attr('data-goto');
        $('html, body').animate({ scrollTop: $(selector).offset().top}, 1200);
    });
});