Equal Height Cards in Slick Slider/Carousel

This is a basic example of getting all content areas (cards) to have the same height when they are in a slick slider or carousel. If you need help or something isn’t working right, reach out to me!

• in the example below, Slick targets .equal-height-cards

Reference Sites

Not sure these are exactly the same but they are using a similar setup. Probably will have to slightly modify for your specific site depending on the design.

• https://limestonebank-uat.banno.com/
• https://1stunitedcu-uat.banno.com/

HTML

• .p-1 div below is to create some space between the cards when it goes to showing more than one at a time.
  • if your cards don’t need space, you can eliminate this div wrapper along with the extra &, div in the SCSS below
• .mx-auto if you have a max-width on your card and want to center it when only one at a time shows {% raw %}

<div class="equal-height-cards container">
  <div class="card-box p-1 remove-blank">
    <div class="card-with-bg-class mx-auto">
      <div class="content" data-content-block="card1" data-content="content" data-editable="editable">
        {{#page.card1}}
          {{& content}}
        {{/page.homeCard1}}
        <!-- @if NODE_ENV!='production' -->
          <div><img src="https://dummyimage.com/300x220/69c/ccc" alt=""></div>
          <h2>Free Checking</h2>
          <p>You can access your money quickly & easily through online banking or our free mobile app. Plus, you’ll earn competitive dividends on your deposits.</p>
          <p><a href="/accounts/personal/free-checking">See Free Checking</a></p>
        <!-- @endif -->
      </div>
    </div>
  </div>
</div>

{% endraw %}

SCSS

• this assumes nothing changes with slick. Right now it generates a .slick-track > .slick-slide > div > <your actual html> so that’s why there’s so many > divs.
• you could also break out the flex extend to each selector, but this makes it easier
• change d-md-flex to whatever break point you want them to start being equal height

.equal-height-cards{
   // equal height on medium screens and up
   .slick-track, .slick-slide{
      @extend .d-md-flex;
   }
   .slick-slide{
      @extend .h-auto;

      > div, .card-box, .card-with-bg-class{
         @extend .h-100;
      }
   }
}

Tags: bootstrap 4, bs4, scss, sass, slick, carousel