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!

Implementare l'infinite scroll con JavaScript/jQuery

Ecco come conoscere l'user-agent di un crawler o di un qualsiasi browser

Chart.js e jQuery: caricare dati JSON in un grafico

Condividi il post con i tuoi amici o colleghi