How can I set all Owl Carousel items to equal height?
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
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>Solution
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;
}
- How to set iframe size dynamically
- Making a img appear/disappear in html5
- How to escape HTML
- Bootstrap label overlay
- Stuck showing my information taken from the input field
- Ant Design Table with vertical and horizontal scroll
- Two div blocks on same line
- How to allow 'Open in a new tab' when using ng-click?
- Applying zoom into point like Aseprite
- Specifying multiple targetOrigin uris in postmessage
- Get input field value from Elementor Pro Form
- How to Submit a form without reloading page
- How to determine if element is last or first child of parent in javascript/jquery?
- Moving mat-icon to left of expansion panel header title?
- How do I position the buttons at the bottom in the q-input field?
- Dynamically changing the attributes of a HTML element?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Escape </ in script tag contents
- Find html label associated with a given input
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- Emojis in Angular html template
- How to make a delete button to delete an item, to which it belongs, from the list?
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- JavaScript: get custom button's text value
- redirect to appstore or google play
- Is there a way to add a blank data attribute to an element using JavaScript?
- Fixed element positioning relative to its parent