Collection of free jQuery timeline code examples from Codepen and GitHub.

Related Articles

  1. Bootstrap Timelines
  2. CSS Timelines
  3. ReactJS Timelines
  4. Tailwind Timelines

Author

  • Christine Mi

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Super Mario Timeline Interactive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • René Orozco

Links

Made with

  • HTML / CSS / JS

About a code

Super Mario Timeline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Timeline

Author

  • Wikyware Net

Links

Made with

  • HTML / CSS / JS

About a code

Timeline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: aos.css, aos.js

Author

  • John Wai

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Slide Sync

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, slick.js

Author

  • Kent Chang

Links

Made with

  • HTML / CSS (Sass) / JS (TypeScript)

About a code

Nested & Color Coded Interactive Timeline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: jQuery Timeline v2

Author

  • ka215

Links

Made with

  • HTML / CSS / JS

About a code

jQuery Timeline v2

You can easily create the horizontal timeline with two types by using this jQuery plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.timeline.css, jquery.timeline.js

Demo image: jQuery Timeline Plugin

Author

  • Ilker Yılmaz

Links

Made with

  • HTML / CSS / JS

About a code

jQuery Timeline Plugin

jQuery timeline plugin, easily creates timeline slider.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: timeline.js

Demo image: Timeline Style Navigation

Author

  • Naila Ahmad

Links

Made with

  • HTML / CSS (SCSS) / JS

About a code

Timeline Style Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css, font-awesome.css, bootstrap.js

Demo image: Vertical Timeline

Author

  • Ryan Fitzgerald

Links

Made with

  • HTML / CSS / JS

About a code

Vertical Timeline

Vertical Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: vertical-timeline.css, vertical-timeline.js

Author

  • Ritesh Kumar

Links

Made with

  • HTML / CSS / JS

About a code

Horizontal Timeline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.mobile.js

Demo image: TimelineMe

Author

  • Mickaël Roy

Links

Made with

  • HTML / CSS / JS

About a code

TimelineMe

A flexible timeline plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery-timelineme.js

Author

  • tarek

Links

Made with

  • HTML / CSS / JS

About a code

Timeliner

Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: timeliner.js