Май 2023

сдайдер без jquery: ставим splide вместо slick

Мы сравнили два популярных слайдера slick и splide. На примере одного из проектов показали, как отрабатывают js-библиотеки на одинаковой верстке, какие есть нюансы, и почему мы выбрали именно splide.

Мария Голова
фронтенд лид

#сдайдер

#javascript

#сайт

#jquery

#slick

#splide

О проекте

В мае 2023 в студию поступил запрос на дизайн и верстку посадочной страницы для кинотеатра Москва. Клиент хотел получить результат архивом, который распакует у себя на отдельном домене и сайт будет работать без дополнительных настроек.По дизайну на одну страницу согласовали аж два слайдера. Сначала вспомнили о библиотеке slick.js.

Slick.js

Это популярная, адаптивная и легкая в использовании библиотека слайдера. Подключение заняло две минуты. Настройки автовоспроизведения, кнопок переключения, количества слайдов, стилизация под дизайн-макет не вызвали проблем. Мы уже использовали slick.js на других проектах и знали о недостатках. Карусель с 30-35 фотографими на мобильном интернете подгружалась с задержкой в 3-5 секунд даже с параметром "ленивой загрузки" изображений. Пользователи получали негативный опыт, что в дальнейшем сказалось на восприятии бренда в целом.

В новом проекте на посадочной странице в одном слайдере было 3 постера фильмов, в другом – фото с мероприятий, до 10 штук. Это приемлемое количество изображений для slick.js. Мы подключили карусель и увидели, что при переключении слайдов изображения дергаются. Изменили правила css, изменили траектории с easy-in-out на линейную – стало лучше, но проблема осталась.

Splide.js

Splide.js – новая библиотека, которая уже покорила разработчиков производительностью и пользовательскими настройками. С модульной архитектурой загружаются только те функции, которые необходимы. Библиотека splide.js легкая, а значит быстро прогружается и не тормозит сайт, легко стилизуется под проект.Slick.js лучше оптимизирован для мобильных устройств, и способен работать с большим количеством изображений без потери скорости.

Подключаем и сравниваем

Обе библиотеки Slick.js and Splide.js легко интегрировать в проект. После подключения и стилизации оба слайдера выглядят одинакового. Разница проявляется в отработке эффектов. В нашем случае активный слайд увеличивается по ширине и высоте, поэтому видно разницу при переключении:

иллюстрация gif

В slick.js размер слайдера меняется одновременно со сменой активного статуса. Splide.js делает это последовательно: сначала устанавливает позицию, потом применяет стили. Возможно, для вашего проекта это будет критичным замечанием, но нас больше смущало подергивание слайдов в slick.js.

Еще один аргумент в пользу splide.js

Библиотека splide.js не требует jQuery, в отличие от slick. jQuery умирает, об этом говорят уже лет 10, но все еще используют по нескольким причинам:многие сайты написаны на jQuery и продолжают работать. Разработчики и владельцы бизнесов не хотят вкладывать ресурсы в полный рефакторинг кода (зачем? работает ведь);slick.js и многие другие библиотеки также продолжают требовать наличие jQuery. Статистика установки npm-пакетов за последние 2 года показывает, что jquery остается популярным, больше загрузок только у react. Стоит учитывать, что библиотеку jquery скачивают непосредственно с сайта архивом или подключают CDN.В виду широкого распространения библиотеки jquery, полезно познакомиться с ней, но в новых проектах не советуем ее применять.

Выводы

Обе библиотеки обладают преимуществами и недостатками. Slick.js – популярный инструмент, но способен затормозить работу сайта при большом количестве изображений. Splide.js быстрее, легче и не требует jQuery. Splide.js так же легко настраивается и создает плавные переходы между слайдами. В итоге, для нашей посадочной страницу выбрали Splide.js, что позволило отказаться от использования дополнительной библиотеки jQuery.

Есть вопрос? Напишите нам в телеграм @fiiire_branding или на почту in@fiiire.design