Synchronized Height Bootstrap Cards Inside Slick Carousel

Question

Synchronized Height Bootstrap Cards Inside Slick Carousel

I am encountering difficulties achieving equal height bootstrap cards with varying length body content when using a slick carousel. Despite searching for solutions on similar issues, none of them seem to work in my specific situation.

While I have successfully achieved equal height slides, I am struggling to make the cards within the slides occupy 100% height of the slide (parent container). My goal is to replicate what the Bootstrap class 'card-deck' accomplishes but within a carousel.

HTML

<div class="container">
        <div class="row>
            <div class="col-10 mx-auto s_container">
                <div class="slider">
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, rem?</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">More Info</a>
                       </div>
                   </div>
                    <div class="card">
                        <img class="card-img-top" src="img-ph.jpg" alt="place holder">
                        <div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
                        <div class="card-footer">
                            <a href="#" class="btn btn-primary">>More Info</a>
                    <</div>
                  </div>
                 </div>
             <div>
         </div>
    </div>

CSS

.s_container{
margin: 0 auto;
padding: 0 40px 0 40px;
width: 100%;
}

.slider{
border: 2px solid red;
}

.slick-track {
display: flex !important;
}

.slick-slide {
margin: 12px;
height: auto;
border: 2px solid green;
}

.slick-frame {
visibility: hidden;
}

An example of this in action can be viewed here:

Example Link

css bootstrap-4 slick.js

Answer 1

Answer №1

For many developers, achieving equal height has been a persistent challenge. In my view, there are two viable solutions:

Javascript solution

The approach involves iterating through all the cards to determine the tallest one. Once identified, set all cards to this maximum height using JavaScript.

https://www.bootply.com/LnwZjxWe7L

// Accessing card elements
var cards = $('.card-body');
var maxHeight = 0;

// Calculate the maximum height among cards
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to the calculated height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}

CSS only solution

This alternative is more intricate and requires detailed explanation. Here's an example implementation:

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

<div id="container3"> <!-- added -->
    <div id="container2"> <!-- added -->
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
        </div>
    </div> <!-- added -->
</div> <!-- added -->

This CSS-based technique was sourced from:

Answer 2

For many developers, achieving equal height has been a persistent challenge. In my view, there are two viable solutions:

Javascript solution

The approach involves iterating through all the cards to determine the tallest one. Once identified, set all cards to this maximum height using JavaScript.

https://www.bootply.com/LnwZjxWe7L

// Accessing card elements
var cards = $('.card-body');
var maxHeight = 0;

// Calculate the maximum height among cards
for (var i = 0; i < cards.length; i++) {
  if (maxHeight < $(cards[i]).outerHeight()) {
    maxHeight = $(cards[i]).outerHeight();
  }
}
// Set ALL card bodies to the calculated height
for (var i = 0; i < cards.length; i++) {
  $(cards[i]).height(maxHeight);
}

CSS only solution

This alternative is more intricate and requires detailed explanation. Here's an example implementation:

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

<div id="container3"> <!-- added -->
    <div id="container2"> <!-- added -->
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
        </div>
    </div> <!-- added -->
</div> <!-- added -->

This CSS-based technique was sourced from:

Synchronized Height Bootstrap Cards Inside Slick Carousel

Answer №1

Similar questions

Utilizing React and Material-UI to Enhance Badge Functionality

Shadow box with arrow/bubble element using CSS

Automate the process of opening an ngbpopover from an Angular 2 component using programming techniques

Ways to showcase a website within an HTML document using a URL?

nsIStyleSheetService - The Gateway to Stylish CSS

Having trouble utilizing vue-bootstrap's $bvModal feature in Vuejs for dynamic modal rendering

Unable to adjust font weight as intended

What are the ways to ensure my query columns fill the entire page space?

I'm facing an issue where I am unable to connect images to specific pages within my carousel using Bootstrap on

Craft a circular design with an Arc and a Pie using the DIV DOM element

The presence of an image within an HTML anchor is causing an unexpected artifact to

Having Trouble with jQuery toggleClass

ways to halt a noise once an animation is complete

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

Align the last line of flex cells to the left side

Ways to ensure that two divs have equal heights based on whichever one has the greater height using CSS

Ways to reduce lag while executing a for loop

Customize Bootstrap to change the hover color of a button

Exploring ways to animate a conditionally displayed component when the state changes using a combination of javascript and css

Does the margin fall within the element's boundaries?