set all owl carousel items with equal height
18,482
Solution 1
Try the css below:
.owl-carousel .owl-stage{display: flex;}
.article-items {
display: flex;
flex: 1 0 auto;
height: 100%;
}
.aticle-box {
position: relative;
overflow: hidden;
/* margin-bottom: 80px; *//*This is optional*/
display: flex;
flex-direction: column;
align-items: stretch;
}
Solution 2
Solution applies only to static websites.
If you are using card elements then you could achieve the same height for all cards by setting the min-height for card-images and card-bodies for all elements as the maximum height observed in all card-images and all card bodies. For eg: I have 5 elements, out of which the maximum height seen in an element was 200px. In that case, I can implement the following code:
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 imageclass">
<img src="..." class="img-fluid" alt="...">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem Ipsum dolor sit amet.</p>
</div>
</div>
Here's the CSS that I used:
.image-class {
min-height: 240px;
background-color: whitesmoke;
}
.card .card-limiter {
min-height: 320px;
}
Take a look at the code snippet I've attached below:
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items: 3,
itemsDesktop: [1000, 3],
itemsDesktopSmall: [979, 2],
itemsTablet: [768, 1],
pagination: false,
autoPlay: true
});
});.top-space {
margin-top: 100px;
}
.image-class {
min-height: 240px;
background-color: whitesmoke;
}
.card .card-limiter {
min-height: 320px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<!-- added owl-carousel, animate.css -->
<title>Sample-Code</title>
</head>
<body>
<div class="top-space container">
<div class="owl-carousel text-center">
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi accusantium praesentium, officiis aut deserunt repudiandae sequi id modi nemo esse culpa qui odio beatae, rem in obcaecati consequatur labore ut!</p>
</div>
</div>
</div>
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse tempora sint at laboriosam aliquam tempore.</p>
</div>
</div>
</div>
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1504548840739-580b10ae7715?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, ad!</p>
</div>
</div>
</div>
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, nostrum sed natus facere dolorem enim sunt sequi labore nobis nam qui reiciendis consequatur.</p>
</div>
</div>
</div>
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1484950763426-56b5bf172dbb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, facilis accusamus necessitatibus distinctio corrupti vel quam ipsa quasi officiis deserunt.
</p>
</div>
</div>
</div>
<div class="mx-1 row justify-content-center">
<div class="card" style="width: 18rem;">
<div class="row align-items-center card-img-top mx-0 image-class">
<img src="https://images.unsplash.com/photo-1468956332313-2dcf1542828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjc1MjQyfQ&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
</div>
<div class="card-body card-limiter">
<h5 class="card-title">Lorem Ipsum</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis harum saepe alias quos. Cum reiciendis, ullam, sapiente voluptatem soluta magnam delectus est expedita culpa iste nam reprehenderit molestiae adipisci nulla.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
Author by
Asiya Fatima
Updated on June 23, 2022Comments
-
Asiya Fatima almost 2 years
I am working on owl carousel I want all items with the same height when there is more content added items height are not coming equal. I tried with flex properties also but am not understanding why it is not working. please, anyone, point me in the right direction I really stuck in these. Thanks in Advance Here it is codepen
Expected Output
$(document).ready(function() { $('#article-carousel').owlCarousel({ loop: true, autoplay: true, autoHeight: true, autoplayTimeout: 2000, margin: 10, dots: false, nav: true, responsive:{ 0: { items: 1, }, 768: { items: 4, }, 1024: { items: 4, }, 1100: { items: 4 } } }) });* { margin: 0; padding: 0; } .wrapper { position: relative; overflow: hidden; } .section-inner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; } .article-items { display: flex; flex: 1 0 auto; } .articles-wrap { position: relative; padding: 80px 0; background: #f7f5f2; } .article-title { font-family: "Filson Soft", sans-serif; font-size: 52px; font-weight: bold; letter-spacing: 1.06px; color: #3b3d4e; padding-bottom: 60px; padding-top: 40px; } .aticle-box { position: relative; overflow: hidden; margin-bottom: 80px; } .box-img { display: block; } .box-title { font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 500; line-height: 1.42; letter-spacing: -0.51px; color: #000000; margin-bottom: 25px; } .box-content { font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 300; line-height: 1.44; letter-spacing: -0.7px; color: #000000; padding: 30px 25px; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; background: #ffffff; } .box-content p { opacity: 0.5; } .box-btn a { opacity: 0.2; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 500; color: #000000; padding-top: 30px; line-height: 2.63; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .box-btn { position: relative; padding: 10px; } .article-img { position: relative; }<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script> </head> <div class="wrapper"> <div class="articles-wrap"> <div class="section-inner"> <h2 class="article-title">News articles</h2> <div id="article-carousel" class="owl-carousel owl-theme"> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title articles News articles Title article Titles</h4> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title</h4> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title articles Title articles articles</h4> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title</h4> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title articles Title articles articles</h4> <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> <div class="item article-items"> <div class="aticle-box"> <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure> <div class="box-content"> <h4 class="box-title">News articles Title</h4> <p>ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p> <div class="box-btn"> <span><a href="#">Read more</a></span> </div> </div> </div> </div> </div> </div> </div> <!--carousel ends here--> </div>