<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=""> <div class="sectionContent"> <h4>Heading 3</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 4</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 5</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 6</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 7</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 8</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 9</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 10</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> </div> </div> </div>

.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 { opacity:1; transform: scale(1); }

$('.owl-carouselTheming').owlCarousel({ loop:true, margin:10, nav:true, center: true, dots:false, touchDrag : true, mouseDrag : true, autoplay: !0, arrows: !0, })