Scrolling Timeline Plugin With jQuery And Bootstrap 4- Vertical Timeline

A lightweight and configurable jQuery timeline plugin which displays a sequence of events in a responsive, vertical timeline interface styling with Bootstrap 4 framework.

Your users are able to scroll through the events with mouse wheel.

How to use it:

1. Insert the jQuery Vertical Timeline plugin after you've loaded the latest jQuery library and Bootstrap 4 framework.

<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" 
      integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 
      crossorigin="anonymous">
<link href="timelinev.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.timelinev.js"></script>

2. Add your own events containing dates and details to the vertical timeline following the HTML structure like this:

<div id="timeline" class="row">

  <div class="timelineCont col-12">
    <div class="row">
      <div class="date col-5">
        <h2>2018</h2>
      </div>

      <div class="text col-7">
        <p>Event 1</p>
      </div>
    </div>
  </div>

  <div class="timelineCont col-12">
    <div class="row">
      <div class="date col-5">
        <h2>2017</h2>
      </div>

      <div class="text col-7">
        <p>Event 2</p>
      </div>
    </div>
  </div>

  <div class="timelineCont col-12">
    <div class="row">
      <div class="date col-5">
        <h2>2016</h2>
      </div>

      <div class="text col-7">
        <p>Event 3</p>
      </div>
    </div>
  </div>

  ...

</div>

3. Call the plugin on the top container to generate a default timeline on the page.

$(function(){
  $('#timeline').timelinev();
});

4. Possible plugin options to customize the timeline.

$('#timeline').timelinev({

  // container element
  timelineDiv:   $(this),

  // selector of timeline content
  containerDivs:   '.timelineCont',

  // selector of date
  dateDiv:     '.date',

  // selector of event details
  textDiv:     '.text',

  // HTML markup for dates
  dateHtml:      'h2',

  // HTML markup for details
  textHtml:      'p',

  // active class
  dateActiveClass: '.active',

  // animation speed
  datesSpeed:      '750'
  
});

---

This awesome jQuery plugin is developed by XRaspall. For more Advanced Usages, please check the demo page or visit the official website.