Aleš Sýkora / March 24, 2021 / 1 comments

Flickity carousell same height slides fix

Post summary: If you need all your slides to have same height, add the CSS selector to your slider cells and use this code in your CSS: Do not forget to add the cellSelector attribute to your flickity slider setup:

If you need all your slides to have same height, add the CSS selector to your slider cells and use this code in your CSS:

.carousel-cell {
    display: flex;
    align-items: stretch;
    min-height: 100%;
}
.carousel .flickity-slider {
	height: 100%;
}

Do not forget to add the cellSelector attribute to your flickity slider setup:

(function($) {

    $('.carousel').flickity({
        cellSelector: '.carousel-cell',
    });

})(jQuery);

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

1 comments

Share Your Thoughts