Как сделать свою навигацию для Slick Slider?
Получаете элементы, которые будут выступать в роли кнопок для перехода к слайдам; вешаете на них обработчик клика, в котором получаете индекс кликнутого элемента и переключаете слайдер на соответствующий слайд:

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/
Возможна. При клике на элемент переключайте слайдер на нужный слайд. В документации это есть. Например метод slickGoTo.