November 2023

Probably the best free slider for a website

When a front-end developer is looking for a free, easy-to-manage, and adaptive slider library for a website, the choice is between two popular javascript libraries: Slick.js and Splide.js. Surely, each has advantages and disadvantages. In this article, we will compare these solutions for our task.
frontend lead Maria Golova
Maria Golova
frontend lead

About the project

In May of 2023 we received a request to design and build a landing page for the Moscow Cinema's club card. The client wanted to get the site in an archive, which will unpack on his server and run the site without additional settings. The design of the landing page assumed two sliders. At first, the Slick.js library came to mind.


Slick.js is a popular, adaptive, and easy-to-use slider library. It takes five minutes to connect, and lots of settings: autoplay, gallery, transition effects, and others - more opportunities for slider customization than you need, honestly. But with the internet speed on mobile devices, if there are a lot of images in the slider, it takes a long time to load. The code size is about 43Kb - not a crime. Users get a negative experience, which then affects brand perception. The client wanted two sliders on the landing page: in one - 3 posters of new films, in the other - photos from events, up to 10 pieces. This is an acceptable number of images for slick. But when we connected the carousel, we saw that when switching slides, the images twitch. We changed the CSS rules, and changed the transitions from easy-in-out to linear - it became better, but the unpleasant twitching remained.
The code example for Slick slider
Look at this peace of code for Slick slider. It is rather simple, the class "films-cover-item" contain just an image.
jQuery code to run the Slick slider
This jQuery code launches the Slick slider.


Splide.js is a new library that has already won the hearts of front-end developers. The modular architecture of the library allows you to load only those functions which you need. Weighs 27Kb (remember the size of Slick.js - 43Kb?), which means it loads quickly and does not load the page. Lots of settings, and easy-to-customize design. In terms of performance, Splide.js is much faster than Slick.js. Better optimized for mobile devices and can handle tonns of images without losing speed.
The code example for Splide slider
The code for the Splide slider. It is a bit more strokes, the list tags <li> have a containers for a film's cover.
Run the Splide slider
And let's run the Splide slider.

Plug and play comparison

Both Slick.js and Splide.js libraries are easy to integrate into a project. After connecting and styling, both sliders look the same.
Slick and Splide sliders on the page look the same
But you can see the difference in the effect processing. In our case, the active slide is larger than the others and we can see this difference well:
In Slick.js the size of the slider changes synchronously with the change of the active status. And did you notice the twitching of the first slide?
Splide.js does it sequentially: first, it sets the position, then it applies styles. The client has no fundamental difference, but we didn't like the twitching of slides in Slick.js.

One more argument in favor of Splide.js

The Splide.js library does not require jQuery, unlike Slick.js. People have been talking about jQuery dying for about ten years, but it's still with us for several reasons:
– lots of sites have been written and continue to run with the jQuery library. Developers were happy with the speed of writing code: compared to pure javascript, it increased many times over. Developers and business owners don't want to invest resources in a system refactoring (why? it works)
– many libraries depend on jQuery, including Slick.js.
The npm trends for js frameworks
According to npm package installation statistics for the last two years, we can see that jQuery remains popular, more downloads only with React. But many people download the jQuery library directly from the site as an archive or connect CDN. Due to the wide distribution of jQuery, you need to be familiar with it, sooner or later you will encounter this beast. But in new projects, we try not to use jQuery. This was the decisive argument in favor of the Splide.js.


Both libraries have advantages and disadvantages. Slick.js is a popular tool, but it can slow down the work with a large number of images. Splide.js is faster, lighter, and does not require jQuery. Splide.js is just as easy to customize and creates smooth transitions between slides. As a result, we chose Splide.js for our landing page.
The deploy of this project you can see on github.
Have questions? Text us telegram @fiiire_branding or