CODEWITHSUNDEEP
htmlcsscarouselowl-carousel
Asiya Fatima
Asiya Fatima

Reputation: 1438

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

Codepen

Expected OutputImage

  $(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>

Upvotes: 11

Views: 47203

Answers (4)

sabithkumar
sabithkumar

Reputation: 412

Try This:

.owl-carousel .owl-stage{display: flex;}
.aticle-box {height:100%;background:#000} // change

Upvotes: 1

Astro
Astro

Reputation: 901

it does not need more code, just do the following css code:

/*(1) owl-stage box*/
.owl-carousel .owl-stage { display: flex; }
/*(2) the direct div of each element in the owl carousel*/
.article-items { height: 100%; }

and do not add 100% to the owl-item height.

Upvotes: 6

Ananthu Mani
Ananthu Mani

Reputation: 11

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>

Upvotes: 1

sumeshsn1
sumeshsn1

Reputation: 868

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;
}

Upvotes: 27

Related Questions