Как в slick сделать индикатор полосу вместо пагинации?

"Полоса" будет состоять из двух div'ов, вложенных один в другой. Цвет фона разный, у второго анимируется изменение ширины:

<div class="nav">
  <div class="nav-inner"></div>
</div>

.nav {
  height: 20px;
  background: #ddd;
}
.nav-inner {
  height: 100%;
  background: red;
  transition: width 0.5s;
}

Метод обновления "полосы" - принимает номер слайда, устанавливает ширину внутреннего div'а:

const updateNav = slide => $navInner.width(`${(slide + 1) / slidesCount * 100}%`);

Этот метод используется при инициализации слайдера и изменении слайда:

$slick.on({
  init: (e, slick) => updateNav(slick.currentSlide),
  beforeChange: (e, slick, currSlide, nextSlide) => updateNav(nextSlide),
})

Клик по "полосе" - из отношения положения курсора и ширины "полосы" вычисляется индекс слайда, к которому надо перейти:

$nav.on('click', function(e) {
  $slick.slick('slickGoTo', e.offsetX / $nav.width() * slidesCount | 0);
});

https://jsfiddle.net/u7s2r3p4/2/