September 11, 2025 at 9:54 pm
#10045969
Keymaster
Hi, for that you need a custom css, here’s an example:
HTML:
<div class="owl-carousel custom-carousel-1 owl-theme nav-bottom nav-lg nav-transparent nav-borders rounded-nav" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'margin': 20, 'autoHeight': true, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 0}">
<div class="py-4">
<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
</div>
</div>
</div>
<div class="py-4">
<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
</div>
</div>
</div>
<div class="py-4">
<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
</div>
</div>
</div>
<div class="py-4">
<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
</div>
</div>
</div>
<div class="py-4">
<div class="card border-radius-2 bg-color-light border-0 box-shadow-10">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus nulla dui, in dapi.</p>
</div>
</div>
</div>
</div>
CSS (css/custom.css)
.custom-carousel-1 .owl-stage {
display: flex;
}
.custom-carousel-1 .owl-item {
display: flex;
flex: 1 0 auto;
}
.custom-carousel-1 .card {
height: 100%;
}