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

Question

[Denis_8106]

Как в slick сделать полосу пагинации в виде только одной линии, чтобы индикатор активного слайдера бегал по одной линии, вне зависимости от количество слайдов?
По-умолчанию сразу отображается 3 слайда, скролл - 1 слайд.

Comments

[Ankhena]

Попробую переформулировать ваш вопрос: как кругляшки превратить в прямоугольники и убрать между ними отступы.

[Denis_8106]

Ankhena, можно и так сказать)) только как в этой истории узнать ширину каждой "кругляшки" при изменении кол-ва слайдов?!) При каждом изменении кол-ва лесть в css - ну, такое решение, на 2+))

[Ankhena]

Denis_8106, зачем?

Answer 1

[ES-Good]

Можно стилями .slick-dots задаёшь flex
Элементам списка внутри задай стиль flex-grow: 1;
И будет у тебя полностью заполнятся полоса, дальше дело твоих уже стилей, как кнопки хочешь стилизовать
Пример из того что я делал, тут не слик правда, но думаю это поможет элементы .progress-bar__line
Можешь в девтулзе попробывать их подобовлять в блок и увидешь что они сами заполняют пространство как надо
https://es-good.github.io/RS-App/