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

Question

[freeman0204]

Например если 3 слайда, то полоса заполнена на треть от 100%, как это можно реализовать?

Answer 1

[0xD34F]

"Полоса" будет состоять из двух 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/

UPD. Вынесено из комментариев:

как сделать так, чтобы width полосы высчитывался в зависимости от slidesToShow

Вычитайте лишнее, при расчётах ширины и номера слайда, к которому надо перейти, slidesCount надо заменить на slidesCount - slidesToShow + 1.

Comments

[rarayaki]

очень помог ваш ответ! подскажите, пожалуйста, а как сделать так, чтобы width полосы высчитывался в зависимости от slidesToShow, а не от slide? например, когда изначально отображается не 1 слайд, а сразу 3, то тогда заполненность полосы в % получается неверна

[0xD34F]

rarayaki, дополнил ответ.

Answer 2

[Максим Тимофеев]

использовать dots для пагинации и стилизовать их, что бы они формировали линию.
или реализовать свою верстку полости и закрашивать цепляясь за события, например afterChange

Comments

[freeman0204]

Неплохая идея, только нужно что бы линия плавно увеличивалась и уменьшалась при перелистывании слайдов.

[Максим Тимофеев]

freeman0204, плавно это уже вопрос стилизации и css