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 :