Горизонтальный таймлайн

Плагин "horizontal-timeline", описанный в данной заметке имеет версию 1.0 и использует библиотеку jQuery. Более новую его версию 2.0 на чистом JS, можно скачать тут или у авторов.

Скрипт сам расставляет даты на шкале времени, основываясь на атрибуте data-date="значение"

Пример:

  1. Горизонтальный таймлайн

    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.

  2. Название события

    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.

  3. Название события

    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.

  4. Название события

    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.

  5. Название события

    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.

  6. Название события

    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.

  7. Название события

    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.

  8. Название события

    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.

  9. Название события

    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.

  10. Название события

    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.

  11. Название события

    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:

CSS:

Скачиваем и подключаем стиль timeline.css и SVG иконку стрелки cd-arrow.svg

jQuery:

Скачиваем и подключаем скрипт timeline.js (предварительно подключив jQuery)

Оригинальные версии:

Версия 1.0 Версия 2.0

Автор плагина codyhouse.co
horizontal-timeline на github

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Сергей:

    Здравствуйте Александр! Возникла небольшая проблемка, подскажите пожалуйста как ее устранить. При прокрутки таймлайн по датам заметки почему то начинают открывается не полностью.

    Ответить
    • Alexander:

      Даже не знаю, тут смотреть нужно.
      Дайте ссылку

      Ответить
  • Ольга:

    Здравствуйте, подскажите пожалуйста, а можно ли сделать так, чтобы новости выводились в обратном порядке, от новых к старым?

    Ответить
    • Alexander:

      Это не совсем носмти, я бы даже сказал что совсем не новости.
      В обратном по\дке ето как ?

      Ответить
      • Ольга:

        В данном примере вывод идёт от старых к новым заметкам, например с 1го января 2019 к 31 декабря 2019. А как сделать наоборот чтобы было?

        Ответить
    • Alexander:

      это не нновсти
      а если вы их так придумали , то пишите ТЗ

      Ответить
      • Ольга:

        Интересует в принципе, возможно ли чтобы был обратный вывод этих событий, от новых к старым?
        И можно ли "закольцевать", чтобы была вечная прокрутка?

        Ответить
      • Ольга:

        На корпоративном сайте данный таймлайн планирую использовать в качестве "архива" прошедших встреч — каждая дата имеет небольшое описание, кто из руководства где провёл встречи с клиентами. Просто нужно чтобы вывод был от 2020года к 2017му, а не наоборот.

        Ответить
      • Ольга:

        Самих встреч в году немного, но клиентам лучше видеть от новых (2020) к старым (2017)

        Ответить
      • Ольга:

        А вообще хочу сказать, что данный сайт очень много полезной информации даёт! Спасибо огромное за труд! Успехов! 🙂

        Ответить
        • Alexander:

          А может проще использовать карусель?
          Например slick (в ближайшем будущем сделаю его перевод, т.к. вещь полезная)
          Куча настроек и возможностей, и соотв. делать вывод по датам в нужную строну.

          Ответить
  • Александр:

    http://prntscr.com/p6bk4q

    Ответить
    • Alexander:

      Нумерация убирается так:

      .cd-horizontal-timeline ol,
      .cd-horizontal-timeline ul {
      	list-style: none;
      }

      Добавил это в css.

      А путь до иконки в этом же css, в строке 144

      background: url(/demo/i/cd-arrow.svg) no-repeat 0 0;
      Ответить
      • Александр:

        Благодарю! Это просто супер - очень полезный сайт и блог)

        Ответить
  • Александр:

    еще сделал копию, как у Вас, только у меня выводится нумерация!
    Возможно ли побороть такую беду?)

    Ответить
  • Александр:

    Уточните, плз, как именно подключить SVG иконку стрелки cd-arrow.svg
    Куда необходимо положить и где прописывется путь, что-то не нахожу 🙁

    Ответить