Slick.js
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.
Look at this peace of code for Slick slider. It is rather simple, the class "films-cover-item" contain just an image.
This jQuery code launches the Slick slider.
Splide.js
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 for the Splide slider. It is a bit more strokes, the list tags <li> have a containers for a film's cover.
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.
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.
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.
Conclusions
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.
