Equal Height Bootstrap Cards within Slick Carousel
Equal height has been a problem for a lot of developers over the years.
In my opinion you can choose between 2 different solutions:
- Javascript solution
You loop over all the cards and save the biggest height. Set all cards to this height with JS after biggest one has been defined.
https://www.bootply.com/LnwZjxWe7L
// Get cards
var cards = $('.card-body');
var maxHeight = 0;
// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
if (maxHeight < $(cards[i]).outerHeight()) {
maxHeight = $(cards[i]).outerHeight();
}
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
$(cards[i]).height(maxHeight);
}
- CSS only solution
This one is a bit more complex to explain so here is an example how to do it:
#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 -->
Slick carousel - force slides to have the same height
Add a couple of CSS styles and it will be ready:
.slick-track
{
display: flex !important;
}
.slick-slide
{
height: inherit !important;
}
Enjoy! :-)
How to adjust the height of slides in Slick slideshow to be equal?
Add this:
.simple cite {
margin: 0 auto;
}
.slick-track {
display:flex;
}
.carousel {
height:inherit;
}
That should work fine.
Slick slider same height images within nested flexbox
There are a few reasons your slider items are different heights.
- You used padding-top to create a aspect-ratio height, but you set different percentages to the slider items, this should be equal for all.
- The slider content affects the divs height, to prevent this you should make it position absolute within the slider element.
I created this pen for you, this might help you understand:
https://codepen.io/joostm020/pen/WMYmZv
html,body { font-family: Arial; font-size: 1vw;}
.slider { width: 100%; display: inline-flex;}.slide { position: relative; width: 33.33%; padding-bottom: 20%; margin: 5px; background-color: grey; background-position: center; background-repeat: no-repeat; background-size: contain; /* Try cover for no ugly borders! */}.slide .slide-content { position: absolute; bottom: 0; width: 100%;}
#slide1 { background-image: url(http://placehold.it/400x300); }#slide2 { background-image: url(http://placehold.it/500x200); }#slide3 { background-image: url(http://placehold.it/740x1000); }
<div class="slider"> <div class="slide" id="slide1"> <div class="slide-content"> <h1>Lorem ipsum!</h1> <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra. Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis.</p> </div> </div> <div class="slide" id="slide2"> <div class="slide-content"> <h1>Lorem ipsum!</h1> <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra.</p> </div> </div> <div class="slide" id="slide3"> <div class="slide-content"> <h1>Lorem ipsum!</h1> <p>Donec blandit ullamcorper libero non fermentum.</p> </div> </div></div>
Related Topics
How to Shift the Text in Twitter Bootstrap Navbar to Center
Are Margin and Padding Most Disbalanced Thing Among All Browser
Why Can't Inline Elements Be Transformed
CSS Opacity Affecting Sibling Image Opacity
Position Floated Elements Directly Under Each Other
Draw an Arrow Inside Table Cell Using CSS
Safari and Chrome Ignore Min-Width CSS Propery
How to Override Max-Width for Specific Div
Overflow:Hidden on Body Is Broken in iOS6
Css: Skew a Buttons Border, Not the Text
How to Maintain a Circlur Shape of Element with Dynamic Content
How to Hide Only the First Element of a Type
Is Sizing Fonts Using "Em" Still Relevant