Скрипт сам расставляет даты на шкале времени, основываясь на атрибуте data-date="значение"
Пример:
-
Горизонтальный таймлайн
26 января 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
28 февраля 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
20 марта 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
20 мая 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
9 июля 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
30 августа 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
15 сентября 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
1 ноября 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
10 декабря 2019 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
19 января 2020 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
-
Название события
3 марта 2020 годаLorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<section class="cd-horizontal-timeline"> <div class="timeline"> <div class="events-wrapper"> <div class="events"> <ol> <li><a href="#0" data-date="26/01/2019" class="selected">26 янв</a></li> <li><a href="#0" data-date="28/02/2019">28 фев</a></li> <!-- Еще события --> <li><a href="#0" data-date="19/01/2020">19 янв</a></li> <li><a href="#0" data-date="03/03/2020">3 мар</a></li> </ol> <span class="filling-line" aria-hidden="true"></span> </div> </div> <ul class="cd-timeline-navigation"> <li><a href="#0" class="prev inactive">Prev</a></li> <li><a href="#0" class="next">Next</a></li> </ul> </div> <div class="events-content"> <ol> <li class="selected" data-date="26/01/2019"> <h2>Горизонтальный таймлайн</h2> <em>26 января 2019 года</em> <p>Lorem ipsum dolor sit amet</p> </li> <li data-date="28/02/2019"> <h2>Название события</h2> <em>28 февраля 2019 года</em> <p>Lorem ipsum dolor sit amet</p> </li> <!-- Еще события --> <li data-date="19/01/2020"> <h2>Название события</h2> <em>19 января 2020 года</em> <p>Lorem ipsum dolor sit amet</p> </li> <li data-date="03/03/2020"> <h2>Название события</h2> <em>3 марта 2020 года</em> <p>Lorem ipsum dolor sit amet</p> </li> </ol> </div> </section> |
CSS:
Скачиваем и подключаем стиль timeline.css и SVG иконку стрелки cd-arrow.svg
jQuery:
Скачиваем и подключаем скрипт timeline.js (предварительно подключив jQuery)
Оригинальные версии:
Автор плагина codyhouse.co
horizontal-timeline на github
Здравствуйте Александр! Возникла небольшая проблемка, подскажите пожалуйста как ее устранить. При прокрутки таймлайн по датам заметки почему то начинают открывается не полностью.
Даже не знаю, тут смотреть нужно.
Дайте ссылку
Здравствуйте, подскажите пожалуйста, а можно ли сделать так, чтобы новости выводились в обратном порядке, от новых к старым?
Это не совсем носмти, я бы даже сказал что совсем не новости.
В обратном по\дке ето как ?
В данном примере вывод идёт от старых к новым заметкам, например с 1го января 2019 к 31 декабря 2019. А как сделать наоборот чтобы было?
это не нновсти
а если вы их так придумали , то пишите ТЗ
Интересует в принципе, возможно ли чтобы был обратный вывод этих событий, от новых к старым?
И можно ли "закольцевать", чтобы была вечная прокрутка?
На корпоративном сайте данный таймлайн планирую использовать в качестве "архива" прошедших встреч — каждая дата имеет небольшое описание, кто из руководства где провёл встречи с клиентами. Просто нужно чтобы вывод был от 2020года к 2017му, а не наоборот.
Самих встреч в году немного, но клиентам лучше видеть от новых (2020) к старым (2017)
А вообще хочу сказать, что данный сайт очень много полезной информации даёт! Спасибо огромное за труд! Успехов! 🙂
А может проще использовать карусель?
Например slick (в ближайшем будущем сделаю его перевод, т.к. вещь полезная)
Куча настроек и возможностей, и соотв. делать вывод по датам в нужную строну.
http://prntscr.com/p6bk4q
Нумерация убирается так:
Добавил это в css.
А путь до иконки в этом же css, в строке 144
Благодарю! Это просто супер - очень полезный сайт и блог)
еще сделал копию, как у Вас, только у меня выводится нумерация!
Возможно ли побороть такую беду?)
Уточните, плз, как именно подключить SVG иконку стрелки cd-arrow.svg
Куда необходимо положить и где прописывется путь, что-то не нахожу 🙁