Получаете элементы, которые будут выступать в роли кнопок для перехода к слайдам; вешаете на них обработчик клика, в котором получаете индекс кликнутого элемента и переключаете слайдер на соответствующий слайд:
const $buttons = $('здесь селектор ваших кнопок').click(function() {
$slick.slick('slickGoTo', $buttons.index(this));
});
Чтобы выделить кнопку, соответствующую текущему слайду, добавляете слайдеру обработчик событий init и beforeChange, в котором убираете класс, отвечающий за стилизизацию у всех кнопок (так проще, чем искать ту, которой он назначен в данный момент), добавляете его той, чей индекс совпадает с индексом текущего/будущего (в зависимости от события) активного слайда:
$slick.on('init beforeChange', function(e, slick, currSlide, nextSlide) {
$buttons
.removeClass('active')
.eq(e.type === 'init' ? slick.currentSlide : nextSlide)
.addClass('active');
});
https://jsfiddle.net/t1647ync/ 
Средний
Средний
