"Timeline - Using slider"
Bootstrap 4.1.1 Snippet by MPJJ

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"> <div class="legacy_slider_wrap"> <div class="owl-carousel owl-theme legacy_slider"> <div class="item" data-hash="zero"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2005</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="one"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2006</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="two"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2007</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="three"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2008</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="four"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2009</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="five"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2010</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="six"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2011</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="seven"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2012</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="eight"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2013</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="nine"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2014</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="ten"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2015</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="eleven"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2016</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="tweleve"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2017</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="thirteen"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2018</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="fourteen"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2019</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> <div class="item" data-hash="fifteen"> <div class="legancy-box"> <div class="legancy-img"> <img src="https://i.picsum.photos/id/1026/350/500.jpg"/> </div> <div class="legancy-content"> <div class="year-heading">2020</div> <div class="content"> <p>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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div> </div> </div> </div> </div> <div class="thumb-url-block"> <div class="thumb-url"> <a class="button secondary url" href="#zero"><span>2005</span></a> <a class="button secondary url" href="#one"><span>2006</span></a> <a class="button secondary url" href="#two"><span>2007</span></a> <a class="button secondary url" href="#three"><span>2008</span></a> <a class="button secondary url" href="#four"><span>2009</span></a> <a class="button secondary url" href="#five"><span>2010</span></a> <a class="button secondary url" href="#six"><span>2011</span></a> <a class="button secondary url" href="#seven"><span>2012</span></a> <a class="button secondary url" href="#eight"><span>2013</span></a> <a class="button secondary url" href="#nine"><span>2014</span></a> <a class="button secondary url" href="#ten"><span>2015</span></a> <a class="button secondary url" href="#eleven"><span>2016</span></a> <a class="button secondary url" href="#tweleve"><span>2017</span></a> <a class="button secondary url" href="#thirteen"><span>2018</span></a> <a class="button secondary url" href="#fourteen"><span>2019</span></a> <a class="button secondary url" href="#fifteen"><span>2020</span></a> </div> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800&display=swap'); @import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap'); .legacy_slider_wrap { background: #f1f1f1; padding: 40px 0; } .legancy-box { display: flex; align-items: center; font-family: 'Nunito Sans', sans-serif; } .legancy-box .legancy-img { width: 50%; } .legancy-box .legancy-content { width: 50%; margin-left: -20px; color: #6b6b6b; } .legancy-box .content { background: #f1f1f1; padding: 0px 13px; } .year-heading { font-size: 56px; font-family: 'Fredoka One', cursive; letter-spacing: 2px; line-height: 56px; color: #b1b1b1; } .thumb-url { display: flex; margin-top: 30px; } .thumb-url a { font-family: 'Nunito Sans', sans-serif; background: url(bottom-step-img.png) no-repeat left top; width: 77px; height: 22px; background-size: 100%; display: inline-block; text-indent: 0; padding-top: 18px; font-size: 14px; color: #323232; text-decoration: none; text-align: right; } .thumb-url a span { margin-right: 0; display: inline-block; } .thumb-url a:first-child { background: transparent; } .thumb-url a.active { font-weight: 700; } .thumb-url-block { max-width: 1000px; margin: 0 auto; }
$('.legacy_slider').owlCarousel({ items:3, loop:false, center:true, margin:10, dots:false, URLhashListener:true, autoplayHoverPause:true, startPosition: 'URLHash' }); $('.button.url').on('click', function(){ $(this).addClass('active').siblings().removeClass('active'); });

Related: See More


Questions / Comments: