Vertical-Timeline.js una libreria JavaScript gratuita per creare una timeline verticale di eventi

Pubblicato il 6 Aprile 2023

In uno degli ultimi progetti che ho realizzato avevo necessità di integrare una timeline verticale di eventi. Ho realizzato una libreria JavaScript che permette di integrare, con poche righe di codice, una timeline verticale responsive in un’applicazione web e ho deciso di condividerla con tutti (belli ma anche brutti). Si chiama vertical-timeline.js e puoi scaricarla gratuitamente da Github.

E’ integrata con Bootstrap e FontAwesome e, per usarla (anche in dark mode), devi includere i file vertical-timeline.min.css and vertical-timeline.min.js. Ecco il codice da utilizzare:

var timeline = new VerticalTimeline({
    'id' : 'timeline',
    'mode' : 'light',//or dark
    'items' : [
        {
         'type' : 'primary',
         'title' : 'The first event',
         'image' : '<img src="assets/img/user.jpg">',
         'text' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
          'time' : '2 Hours Ago'
         },
         {
          'type' : 'danger',
          'title' : 'The second event',
          'image' : '<i class="fas fa-times"></i>',
          'text' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
          'time' : '3 Hours Ago'
         },
         {
          'type' : 'secondary',
          'title' : 'The third event',
          'image' : '<i class="fas fa-flag"></i>',
          'url' : '#',
          'text' : 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
          'time' : '5 Hours Ago'
         }
        ]
});

Spero possa tornarti utile. Happy coding!

Sostituire una stringa con un'altra in JavaScript

ComboBox pronte all'uso: select nazioni, regioni e province

Creare una sequenza di animazioni con JavaScript e animate.css

Condividi il post con i tuoi amici o colleghi