"Timeline - Using slider"
Bootstrap 4.1.1 Snippet by MPJJ

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.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');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Simple Vertical timeline
Client or Partners Logo Slider
Timely Login slider

Questions / Comments: