webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Как сделать такой таймлайн?

61387b265b32e367308440.png

Вроде простой таймлайн, каких сотни уже свёрстано, но почему-то застрял на этом блоке)
Осложнения появляются, когда начинаю продумывать адаптивность.
В общем, сейчас кода никакого рабочего нет, делал-делал и решил удалить.
Тут может быть любое количество шагов, а не 4, как сейчас отражено.
Также этот блок должен прокручиваться по горизонтали, чтобы можно было посмотреть все этапы.
Условно, сейчас их будет примерно 9.
Блок должен адаптироваться на широких экранах и ноутбуках.
На планшетах и телефонах уже другая версия будет отображаться.
Когда у нас 1-2 шаг, проблем нет. Но вот если у нас 7 шаг, то блок нужно прокрутить автоматически так, чтобы 7 шаг был в середине - то есть, показываться должны 6, 7 (активный), 8 и 9 шаги.
Класс активности присваивается с бэкэнда.
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
@zombtron
А вот вам велосипед на чистых html+css+js.
В Хроме и Огнелисе работает. Вроде адаптивно (от 320 до 1280).
Не прикрутил анимацию, иконки в кружках и для больш. разреш. экрана настроить нима как.
https://jsfiddle.net/42wb05Lq/2/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@CoderSoft
Я обычно использую timeline компонент из Material UI, удобно кастомизировать, все из коробки.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы