"Owl Carousel Design With Bootstrap 4 - Center Item Active"
Bootstrap 4.1.1 Snippet by karanjeet

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 ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="container">
<div class="row">
<div class="col-xl-12 text-center">
<h2>Owl Carousel With Bootstrap 4 - Center Item Active
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="owl-carousel owl-theme owl-carouselTheming">
<div class="item">
<img src="https://www.infogalaxie.com/wp-content/uploads/2020/08/front-min-375x195.jpg" alt="">
<div class="sectionContent">
<h4>Heading 1</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<a href="#" class="btn btn-success">Read More</a>
</div>
</div>
<div class="item">
<img src="https://www.infogalaxie.com/wp-content/uploads/2020/08/front-min-375x195.jpg" alt="">
<div class="sectionContent">
<h4>Heading 2</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<a href="#" class="btn btn-success">Read More</a>
</div>
</div>
<div class="item">
<img src="https://www.infogalaxie.com/wp-content/uploads/2020/08/front-min-375x195.jpg" alt="">
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
.owl-carouselTheming .item {
background-color:#ffffff;
box-shadow: 0px 0px 12px #e2e2e2;
margin: 20px 5px 10px 5px;
border-radius: 5px;
overflow: hidden;
cursor:grab;
}
.owl-carouselTheming .sectionContent {
padding:15px;
}
.owl-carouselTheming .owl-nav,
.owl-carouselTheming .owl-dots{
text-align:center;
}
.owl-carouselTheming .owl-dots .owl-dot.active {
background-color: #656565;
}
.owl-carouselTheming .owl-dots button.owl-dot {
width: 12px;
height: 12px;
background-color: #83e283;
margin-left: 10px;
}
.owl-carouselTheming .owl-item,
.owl-carouselTheming .owl-item.active {
opacity:0.2;
transition: all ease-in-out 0.4s;
transform: scale(0.9);
}
.owl-carouselTheming .owl-item.center {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.owl-carouselTheming').owlCarousel({
loop:true,
margin:10,
nav:false,
center: true,
dots:true,
touchDrag : true,
mouseDrag : true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Login and Register Modal
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: