Сегодня поговорим о создании временной шкалы для сайта, иногда разработчикам стоит отобразить временной путь, например что компания достигла за эти годы в виде временного графика, мы сегодня расскажем как стилизовать такой timeline при помощи плагина jQuery. Roadmap-это плагин слайдера временной шкалы с jQuery, который динамически отображает события в отзывчивом, прокручиваемом горизонтальном слайдере с плавной анимацией. Ползунок временной шкалы автоматически изменит направление в зависимости от текущего размера экрана.

Если вы хотите получить сразу готовое решение на сайт в виде бесплатного или премиум шаблона тогда стоит обязательно заглянуть на сайт к нашим партнером, там много чего интересно:

Шаг 1. HTML

Для начала подключим стили плагина Roadmap в заголовок вашей страницы сайта:

Создайте элемент placeholder, в котором требуется отобразить ползунок временной шкалы:

Затем включите библиотеку jQuery и плагин Timeline в нижней части вашего сайта:

Всю основную работу будет выполнять плагин, по этому перейдем к следующему шагу и посмотрим, что он умеет:

Шаг 2. JS

Вам нужно создать массив объектов событий для слайдера временной шкалы:

Инициализируйте плагин, чтобы отобразить элементы на слайдере временной шкалы:

Укажите, сколько событий должны отображаться в одном слайде:

Укажите начальный слайд во временной шкале:

Создаем кастомизацию стрелок управления:

У нас будет следующий шаблон событий по умолчанию:

Задайте ориентацию временной шкалы:

Кроме этого временная шкала будет полностью адаптивной, когда окно монитора будет меньше, шкала будет становится вертикально, что очень удобно.

Вот и все. Готово!