In This demo we are provide you tileline slider demo. in this timeline slider you can display image and description with year. this is best way to display timeline in slider. in this timeline you can display multiple year of data. this is light weight jquery.

We allows to free snippets of timeline slider bootstrap , you can download full code of jquery horizontal timeline slider layout. Here in this post i will give you example of horizontal timeline examples snippet and you will get simple code of html, css and jquery. In vertical timeline bootstrap snippet i give you three tab with html, css and js, you can easily get code of responsive horizontal timeline bootstrap layout.


<!doctype html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://nicesnippets.com/demo/timeline.min.js"></script> <link rel="stylesheet" type="text/css" href="http://nicesnippets.com/demo/timeline.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link rel="stylesheet" href="custom.css"> </head> <body class="bg-warning"> <div class="container"> <div class="row"> <div class="col-md-10 offset-md-1"> <section class="pt-5 pb-5"> <div class="timeline-container"> <div class="timeline-1"> <div data-time="2000"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage1.jpg" alt=""> </div> <div class="timeline-detail"> <h4>2000</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2001"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage2.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2001</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2002"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage3.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2002</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2003"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage4.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2003</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2004"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage1.jpg" alt=""> </div> <div class="timeline-detail"> <h4>2004</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2005"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage2.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2005</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2006"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage3.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2006</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2007"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage4.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2007</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2008"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage1.jpg" alt=""> </div> <div class="timeline-detail"> <h4>2008</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2009"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage2.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2009</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2010"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage3.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2010</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2011"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage1.jpg" alt=""> </div> <div class="timeline-detail"> <h4>2011</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2012"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage2.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2012</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2013"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage3.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2013</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2014"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage4.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2014</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2015"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage1.jpg" alt=""> </div> <div class="timeline-detail"> <h4>2015</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2016"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage2.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2016</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2017"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage3.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2017</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div data-time="2018"> <div class="timeline-visual float-left mr-3"> <img src="http://nicesnippets.com/demo/timage4.jpeg" alt=""> </div> <div class="timeline-detail"> <h4>2018</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </section> </div> </div> </div> </body> </html>
section { margin-top: 120px; margin-bottom: 2rem; background: #fff; } .timeline-1 .timeline-item { background: #ddd; border: 0; }
$('.timeline-1').Timeline();

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post