However, I did come up with a quick and dirty workaround. Unfortunately, this issue was never resolved! (╯°□°）╯︵ ┻━┻ As it turns out, the width of the carousel slides are automatically computed based on the parent element, which turns out to be 0 if it is hidden.

Luckily, someone else already experienced this issue. To my surprise, the carousel wasn't rendering until I clicked on one of the navigation buttons, as seen in this example. When I was first using Slick, I placed it in a hidden div element that could be toggled on and off. Not rendering within a hidden div element No piece of software is without its flaws and while trying out Slick, I came across two bugs which provided me quite a few headaches. I recommend taking a look at the documentation and exploring the various settings that are available.

This little demonstration could go on forever, but at this point I think you get the gist (I hope 😅). Make a choice:Īfterwards, simply insert the CSS as links into the HTML page head and the JavaScript just before your closing body tag.

Slick offers two option when it comes to using a CDN. A pretty bold statement if you ask me! 👀 Well, in this tutorial, I'll be showing you how to use Slick to create a carousel as well as point out some of its quirks and errors that I encountered along the way.Įvery journey must start somewhere and Slick is no exception! For the installation, there are two options: either using a CDN or a package manager. I found a fantastic jQuery library called Slick, claiming it's the last carousel you'll ever need. Recently, I came across such a situation while trying to build a carousel. In this case, it's best to use another more dedicated library which offers you more options. However, once in a while the components of such a framework are too basic or don't fulfill your requirements adequately. My favorite go-to CSS framework is Bootstrap and I'm sure it is for many others, too.

Slick carousel breaks on resize