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

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

Как создать динамический timeline со слайдером на jQuery. Пошаговая инструкция.

Шаг 1. HTML

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

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

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

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

Динамический timeline со слайдером на jQuery

Шаг 2. JS

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

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

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

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

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

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

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

Динамический timeline со слайдером на jQuery. Заключение.

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

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