I am not a CSS expert. I want all of the cards in a swiperjs slider to have the same height, no matter what the content is in the card. At the moment, the content of some of the cards is a different height. My code looks like this image and my sample code is below. How do I make my cards in swiperjs all have the same height?
Here is the sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<section id="portfolio" class="mt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-12 text-center mb-4">
<h2>Projects I have completed for my clients</h2>
</div>
<div class="col-sm-12 justify-content-center">
<div class="swiper myClients animate__animated animate__pulse">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card mb-5">
<a data-fslightbox href="https://stefan-momcilovic.com/assets/images/tuff.jpg">
<img src="https://stefan-momcilovic.com/assets/images/tuff.jpg" class="card-img-top" alt="Tuffwraps Image" class="swiper-lazy">
</a>
<div class="card-body text-center">
<h5 class="card-title"><a href="https://uk.tuffwraps.com/" class="text-primary" target="_blank" rel="nofollow">Tuffwraps</a></h5>
<p class="card-text">
Built a script that:<br />
1) Scans the products for tags in your Shopify cart <br />
2) If 3 products contain a same tag, the customer will be awarded 20% off <br />
3) Similarly, 4 will get them 25% off, and 5 or more will get them 30% off.
</p>
<a href="https://uk.tuffwraps.com/" class="text-primary" target="_blank" rel="nofollow">Shopify Plus</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card mb-5">
<a data-fslightbox href="https://stefan-momcilovic.com/assets/images/travelbass.jpg">
<img src="https://stefan-momcilovic.com/assets/images/travelbass.jpg" class="card-img-top" alt="Travelbass Image" class="swiper-lazy">
</a>
<div class="card-body text-center">
<h5 class="card-title"><a href="https://travelbass.myshopify.com/" class="text-primary" target="_blank" rel="nofollow">Travelbass</a></h5>
<p class="card-text">
Added a cart slider, made it so the page doesn't refresh in case a new item is added into a cart, while updating information about the quantity and price of products.
</p>
<a href="https://travelbass.myshopify.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card mb-5">
<a data-fslightbox href="https://stefan-momcilovic.com/assets/images/cea.jpg">
<img src="https://stefan-momcilovic.com/assets/images/cea.jpg" class="card-img-top" alt="CEA Image" class="swiper-lazy">
</a>
<div class="card-body text-center">
<h5 class="card-title"><a href="https://www.shop-cea.com/" class="text-primary" target="_blank" rel="nofollow">CEA</a></h5>
<p class="card-text">
Tailored the responsive view for mobile devices.
</p>
<a href="https://www.shop-cea.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card mb-5">
<a data-fslightbox href="https://stefan-momcilovic.com/assets/images/tcl.jpg">
<img src="https://stefan-momcilovic.com/assets/images/tcl.jpg" class="card-img-top" alt="TCL Image" class="swiper-lazy">
</a>
<div class="card-body text-center">
<h5 class="card-title"><a href="https://www.the-clothinglounge.com/" class="text-primary" target="_blank" rel="nofollow">THE CLOATHING LOUNGE</a></h5>
<p class="card-text">Built a new design look</p>
<a href="https://www.the-clothinglounge.com/" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card mb-5">
<a data-fslightbox href="https://stefan-momcilovic.com/assets/images/cl.jpg">
<img src="https://stefan-momcilovic.com/assets/images/cl.jpg" class="card-img-top" alt="CL Image" class="swiper-lazy">
</a>
<div class="card-body text-center">
<h5 class="card-title"><a href="https://creativelighters.com/products/the-mystery-subscription" class="text-primary" target="_blank" rel="nofollow">Creative Lighters</a></h5>
<p class="card-text">Fixed a broken monthly subscription for a mystery box product</p>
<a href="https://creativelighters.com/products/the-mystery-subscription" class="text-primary" target="_blank" rel="nofollow">Shopify</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
$(document).ready(function(){
var myClients = new Swiper(".myClients", {
slidesPerView: 2,
spaceBetween: 30,
autoHeight: true,
autoplay: {
delay: 5000,
},
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
breakpoints: {
"@0.00": {
slidesPerView: 1,
spaceBetween: 10,
},
"@1.00": {
slidesPerView: 2,
spaceBetween: 30,
},
}
});
});
</script>
</body>
</html>
3
Answers
I want to thank PeterJames because of your answer I will able to figure out how can I make it all same height and here is mine solution to this problem
Add
height: auto;to.swiper-slidein the CSS.Set
autoHeight:falseas a slider object parameter. The sliderjs docs say that ifautoHeightis set totruethen the slider wrapper will adapt its height to the height of the currently active slide — which is not what you want.Set
vh-100on eachcard. Othervhvalues may or may not work. I have not tested them properly, but I don’t think they work too well.Finally, the text content was overflowing, so set the font size for the
cardclass to something smaller. However, changing the font size will depend on your particular layout.With your current structure the problem falls with
.card-body. You have a varying amount of content for each.card-bodywhich is determining theheightof each.card.Set a
heighton.card-bodyand useoverflow-y: scroll;so that the.cardswith the most content have a scrollbar. I added a custom scrollbar that is always visibile to demonstrate.