Using Slick Carousel with CSS Flexbox

In a client project, I recently had to integrate the awesome Slick Carousel jQuery plugin on a Bootstrap 4 website. I wanted to vertically center it thanks to the CSS flexbox rule… Until I saw that Slick seemed to not support it. In this article, I will quickly show you how to fix this issue.

The issue I had is that when in a CSS flexbox container, Slick wrongly calculated the width of the carousel. It simply created a very large carousel because Slick was not able to detect the width of the flex parent container. For example, if you use Slick Carousel in Bootstrap 4 in a container like this :

<div class="col-md-6 d-flex align-items-center">
	<!-- YOUR SLICK CONTAINER GOES HERE -->
</div>

… then you will see the issue I’m talking about (unless Slick has fixed this issue when you read this article).

I have tried multiple fixes which don’t work until I found this one. Add this CSS rule to your website :

* {
	min-height: 0;
	min-width: 0;
}

And make sure your Slick container has a 100% width. Let’s say your Slick container is called “.slick-container”, then on top of the above CSS rule, make sure to add this :

.slick-container {
	width: 100%;
}

And done! Your issue should be fixed!

Let le know in the comments if you were able to get your Slick carousel to work in a CSS flexbox thanks to this CSS code 😉 and if it’s not the case, feel free to ask any questions you have and I’ll do my best to help.

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :