Add Ultimate Tabs widget to your Website

Easy-to-Use & Customizable

Horizontal timeline widget

bg-dark hs-fullwidth has-no-gutter color-white

style01

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.
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.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ...


<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>

style02

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.
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.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.
Aliquam lobortis. Suspendisse potenti. Ut varius tincidunt libero. Phasellus magna.... more events here ...

hs-fullwidth color-white bg-dark


<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>

How to add a custom widget to your Jimdo website

1. Click the Matrix Themes admin menu and select the 'Shortcodes' section.

2. Choose any custom widget using the copy button.

3. Paste the widget code to your website inside the 'Widget/HTML' module.

4. Customize it by adding your own text and images.

hs-fullwidth bg-lightgray

How to add a custom widget to Jimdo website

Make your own website

with built-in tools to grow your business online.

Select a template

bg-dark color-white hs-fullwidth

Support

Features

Get inspired

Quick links

hide-in-doc-page

draggable-logo

Showcase

Main colors

	bg-primary
	bg-primary-light
	bg-primary-dark
	bg-secondary
	bg-secondary-dark

Template sections

	body
	top-header
	header
	content

Footer Styles

	background
	text color
	link color
	horizontal line

Buttons

	style 1
	style 2
	style 3
	text color

Other elements

	social icons
	navigation color
	subnav background

Mobile navigation

	background color
	navigation color

Template configurations

has-center-nav g-font has-large-header

Navigation styles

size-15 weight-400 snip-nav --line01 is-uppercase

Content styles

form-white

Footer styles

o-form color-white

Typography

Heading H1

weight-600 is-uppercase

Heading H2

weight-400 is-uppercase

Heading H3

weight-600 is-uppercase

Buttons

weight-600 is-uppercase

Animations

Note: All changes made here will be applied to your entire website.

is-switcher

MATRIX THEMES

STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE