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

Question

[romankushnarov]

Требуется построить таймлайн. Думал сделать через slick, там как раз и стрелки есть. Но не знаю как реализовать саму полосу таймлайна.

Есть ли другое решение поставленной задачи? Костылить через slick не особо хочется, особенно с учетом того, что я понятия на умею как сделать эти полоску, связывающую точки.

Буду очень благодарен за пример кода!

Comments

[Антон Литвиненко]

а по сути то это как раз стандартный слайдер. полочку под точками нарисовать вообще без проблем.

[G F]

Апи слика даёт current slide, берете его и даёте соответствующему элементу на полосе класс актив, всё.

[romankushnarov]

Антон Литвиненко, каким именно образом, если не секрет?

[romankushnarov]

G F, попробую, спасибо

[Rustam Bainazarov]

Swiper. Два синхронизированных слайдера, либо управление нужным слайдом через API.

[Антон Литвиненко]

romankushnarov, что именно вызывает затруднения? Сделай песочнице со слайдером и будем вместе придумывать

[romankushnarov]

Антон Литвиненко, уже сделал по Вашему совету, спасибо большое. Оказалось очень просто, зря задавал вопрос, но может быть кому-то поможет при поиске подобного вопроса :)

Answer 1

[Максим]

Почти то что надо - два раза делал - работает при клике на на dots

https://codepen.io/topicstarter/pen/GRpmoyw
https://codepen.io/topicstarter/pen/xxwdJmw