<style type="text/css">
/*<![CDATA[*/
.events-content ol {
    list-style-type: none;
}

#cc-inner  .horizontal-timeline .events-content li {
    width: auto;
    left: 0;
    top: 0;
    margin: auto;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 5px;
    font-size: inherit;
    text-align: left;
}
    
#cc-inner .horizontal-timeline .filling-line,
#cc-inner  .horizontal-timeline .events a.older-event::after, 
#cc-inner .horizontal-timeline .events a.selected::after{
    background-color: #003be0;
}   
    
#cc-inner .horizontal-timeline .events,
#cc-inner  .horizontal-timeline .events a::after{
    background:#000;
        
}
    
#cc-inner .timeline-navigation a:hover {
    color: inherit;
    border-color: inherit;
}
/*]]>*/
</style>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css" />
<script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script> 
<script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>

<div class="horizontal-timeline" id="myTimeline">
    <div class="events-content">
        <ol>
            <li class="selected" data-horizontal-timeline='{"date": "12/12/2012", "customDisplay": "Sunday"}'>Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus
            aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2016", "customDisplay": "Monday"}'>Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales,
            augue velit cursus nunc, quis gravida magna mi a libero.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2017", "customDisplay": "Tuesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2018", "customDisplay": "Wednesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2019", "customDisplay": "Thursday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2020", "customDisplay": "Friday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here
            ...
            </li>
        </ol>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// timeline
    $(function(){
$('#myTimeline').horizontalTimeline({

  // ! Deprecate these individual options in favour of the object options. //
  desktopDateIntervals: 200,   //************\\
  tabletDateIntervals: 150,   // Minimum: 120 \\
  mobileDateIntervals: 120,  //****************\\
  minimalFirstDateInterval: true,

  dateIntervals: {
    "desktop": 200,   //************\\
    "tablet": 150,   // Minimum: 120 \\
    "mobile": 120,  //****************\\
    "minimal": true
  },
    
  // display type: dateTime, date, time, dayMonth, monthYear, year
  dateDisplay: "dateTime", 

  // normal, reverse
  dateOrder: "normal",
    
  // enable/disable autoplay
  autoplay: false,

  // autoplay speed in seconds
  autoplaySpeed: 8,

  // pause hover
  autoplayPause_onHover: false, 
    

  // enable/disable touchSwipe plugin
  useTouchSwipe: true,

  // enable/disable keyboard interactions
  useKeyboardKeys: false,

  // auto load required resources
  addRequiredFile: false,

  // enable nav buttons
  useNavBtns: true,

  // enable scroll buttons
  useScrollBtns: false,

  // Font Awesome icons
  useFontAwesomeIcons: true,

  // ! Deprecate these individual options in favour of the object options. //
  iconBaseClass: "fa fa-3x", // Space separated class names
  scrollLeft_iconClass: "fa-chevron-circle-left",
  scrollRight_iconClass: "fa-chevron-circle-right",
  prev_iconClass: "fa-arrow-circle-left",
  next_iconClass: "fa-arrow-circle-right",
  pause_iconClass: "fa-pause-circle",
  play_iconClass: "fa-play-circle",
  animation_baseClass: "animationSpeed", // Space separated class names
  enter_animationClass: {
    "left": "enter-left",
    "right": "enter-right"
  },
  exit_animationClass: {
    "left": "exit-left",
    "right": "exit-right"
  },
  iconClass: {
    "base": "fa fa-3x", // Space separated class names
    "scrollLeft": "fa-chevron-circle-left",
    "scrollRight": "fa-chevron-circle-right",
    "prev": "fa-arrow-circle-left",
    "next": "fa-arrow-circle-right",
    "pause": "fa-pause-circle",
    "play": "fa-play-circle"
  }
  
});
    
 });   
});
})(jQuery); 
//]]>
</script>

<style type="text/css">
/*<![CDATA[*/
.events-content ol {
    list-style-type: none;
}

#cc-inner .horizontal-timeline.has-dark-style .events-content li {
    width: auto;
    left: 0;
    top: 0;
    margin: auto;
    padding: 20px;
    background: #222;
    border-radius: 5px;
    font-size: inherit;
    text-align: left;
}
    
#cc-inner .horizontal-timeline.has-dark-style .filling-line,
#cc-inner  .horizontal-timeline.has-dark-style .events a.older-event::after, 
#cc-inner .horizontal-timeline.has-dark-style .events a.selected::after{
    background-color: #eca825;
}   
    
#cc-inner .horizontal-timeline.has-dark-style .events,
#cc-inner  .horizontal-timeline.has-dark-style .events a::after{
    background:#fff;
        
}
    
#cc-inner .horizontal-timeline.has-dark-style  .timeline-navigation a,
#cc-inner .horizontal-timeline.has-dark-style .events a {
    color: #fff;
}
    
#cc-inner .timeline-navigation a:hover {
    color: inherit;
    border-color: inherit;
}
/*]]>*/
</style><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/css/horizontal_timeline.2.0.min.css" />
<script src="https://cdn.jsdelivr.net/gh/ycodetech/horizontal-timeline-2.0@2/JavaScript/horizontal_timeline.2.0.min.js"></script> 
<script src="https://unpkg.com/jquery-touchswipe@latest/jquery.touchSwipe.min.js"></script>
<div class="horizontal-timeline has-dark-style" id="myTimeline2">
    <div class="events-content">
        <ol>
            <li class="selected" data-horizontal-timeline='{"date": "12/12/2012", "customDisplay": "Sunday"}'>Vestibulum volutpat pretium libero. Ut id nisl quis enim dignissim sagittis. Vivamus
            aliquet elit ac nisl. Pellentesque posuere. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2016", "customDisplay": "Monday"}'>Etiam feugiat lorem non metus. Proin faucibus arcu quis ante. Sed consequat, leo eget bibendum sodales,
            augue velit cursus nunc, quis gravida magna mi a libero.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2017", "customDisplay": "Tuesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2018", "customDisplay": "Wednesday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2019", "customDisplay": "Thursday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
            </li>

            <li data-horizontal-timeline='{"date": "12/12/2020", "customDisplay": "Friday"}'>Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here
            ...
            </li>
        </ol>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// timeline
    $(function(){
$('#myTimeline2').horizontalTimeline({

  // ! Deprecate these individual options in favour of the object options. //
  desktopDateIntervals: 200,   //************\\
  tabletDateIntervals: 150,   // Minimum: 120 \\
  mobileDateIntervals: 120,  //****************\\
  minimalFirstDateInterval: true,

  dateIntervals: {
    "desktop": 200,   //************\\
    "tablet": 150,   // Minimum: 120 \\
    "mobile": 120,  //****************\\
    "minimal": true
  },
    
  // display type: dateTime, date, time, dayMonth, monthYear, year
  dateDisplay: "dateTime", 

  // normal, reverse
  dateOrder: "normal",
    
  // enable/disable autoplay
  autoplay: false,

  // autoplay speed in seconds
  autoplaySpeed: 8,

  // pause hover
  autoplayPause_onHover: false, 
    

  // enable/disable touchSwipe plugin
  useTouchSwipe: true,

  // enable/disable keyboard interactions
  useKeyboardKeys: false,

  // auto load required resources
  addRequiredFile: false,

  // enable nav buttons
  useNavBtns: true,

  // enable scroll buttons
  useScrollBtns: false,

  // Font Awesome icons
  useFontAwesomeIcons: true,

  // ! Deprecate these individual options in favour of the object options. //
  iconBaseClass: "fa fa-3x", // Space separated class names
  scrollLeft_iconClass: "fa-chevron-circle-left",
  scrollRight_iconClass: "fa-chevron-circle-right",
  prev_iconClass: "fa-arrow-circle-left",
  next_iconClass: "fa-arrow-circle-right",
  pause_iconClass: "fa-pause-circle",
  play_iconClass: "fa-play-circle",
  animation_baseClass: "animationSpeed", // Space separated class names
  enter_animationClass: {
    "left": "enter-left",
    "right": "enter-right"
  },
  exit_animationClass: {
    "left": "exit-left",
    "right": "exit-right"
  },
  iconClass: {
    "base": "fa fa-3x", // Space separated class names
    "scrollLeft": "fa-chevron-circle-left",
    "scrollRight": "fa-chevron-circle-right",
    "prev": "fa-arrow-circle-left",
    "next": "fa-arrow-circle-right",
    "pause": "fa-pause-circle",
    "play": "fa-play-circle"
  }
  
});
    
 });   
});
})(jQuery); 
//]]>
</script>