Equal height swiper slides
User
swipper slider slide equal height
Assistant
To make all **Swiper slider slides equal height**, even if their content varies in size, you can achieve it using a combination of CSS and JavaScript. Here's how:
—
### ✅ **CSS-only solution (if possible)**
If your content isn't dynamic or can be constrained, try using **Flexbox** to equalize heights:
.swiper-wrapper {
display: flex;
}
.swiper-slide {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}> This works only when Swiper is set to `slidesPerView: auto` or a fixed number and you're not using `loop: true`.
—
### ✅ **JavaScript approach (for dynamic content)**
If slides have variable height content, use JavaScript to equalize them:
function setEqualHeight() {
let maxHeight = 0;
const slides = document.querySelectorAll('.swiper-slide');
slides.forEach(slide => {
slide.style.height = 'auto'; // reset
if (slide.offsetHeight > maxHeight) {
maxHeight = slide.offsetHeight;
}
});
slides.forEach(slide => {
slide.style.height = maxHeight + 'px';
});
}
// Call after Swiper init or when slides/content change
const swiper = new Swiper('.swiper', {
on: {
init: function () {
setEqualHeight();
},
slideChange: function () {
setEqualHeight();
},
},
});—
### ✅ Optional: Trigger on window resize
window.addEventListener('resize', () => {
setEqualHeight();
});—
Let me know if you're using Vue/React or have looping/slides per view to tailor the solution better!