Слайдер-карусель на jQuery: какие плагины живы и как их подключить

Для сайта с jQuery берите Slick: в сентябре 2026 года вышла версия 2.0.0 с поддержкой jQuery 4, а репозиторий не архивирован. Если jQuery на сайте нет, ставьте Swiper или Splide: обоим он не нужен. Owl Carousel 2 не выбирайте: автор в README называет проект почти мёртвым. FlexSlider, jCarousel и Elastislide в новый проект тоже не берите.

Сергей Бензенкоавтор материала

Как выбрать слайдер-карусель

Выбор начинается с проверки, жив ли проект. Дата релиза и состояние репозитория говорят об этом больше, чем красивая демо-страница. Оба признака открываются за минуту на GitHub и в реестре npm.

Как выбрать слайдер-карусель
  • Дата последнего релиза и статус репозитория. Смотрите, не архивирован ли он и нет ли в README заметки о конце разработки.
  • Зависимость от jQuery. Если библиотеки на сайте нет, тянуть её ради одного слайдера не стоит.
  • Совместимость с версией jQuery. Финальный jQuery 4.0.0 вышел 17 января 2026 года, последняя ветка 3.x – 3.7.1 от 28 августа 2023 года. Плагин, написанный под старый jQuery, на четвёрке может сломаться.
  • Лицензия. Бесплатный для открытого проекта плагин бывает платным для коммерческого сайта.
  • Сенсорное управление и адаптивные точки. Слайдер должен менять число карточек по ширине экрана и листаться пальцем.
  • Ленивая загрузка картинок. Она ускоряет первую отрисовку страницы с галереей.
  • Доступность. Карусель без управления с клавиатуры и ARIA-атрибутов не подходит для сайтов, где это требование заказчика. Среди плагинов обзора такое описано в документации Splide, у Swiper есть модуль a11y, у Slick настройка accessibility включает навигацию стрелками и табуляцию.
  • Размер сборки. Сверяйте его на bundlephobia или jsDelivr для той версии, которую подключаете: между мажорными версиями он меняется.

Отдельный вопрос – ставить ли jQuery ради слайдера. Если библиотеки на сайте нет, не ставьте: Swiper, Splide и Glide.js закрывают ту же задачу без зависимостей.

Порядок проверки простой. Сначала откройте страницу пакета в npm и найдите дату последней публикации. Затем зайдите в репозиторий и посмотрите, нет ли там плашки «archived». Потом прочитайте README: там автор пишет о совместимости с версиями jQuery и о судьбе проекта. Если хоть один пункт вызывает сомнения, ищите замену, пока слайдер ещё не встроен в шаблон.

Дату последнего релиза не путайте с датой последнего коммита. Репозиторий бывает живым, а релизы в реестр давно не выходят. Так у Splide: последний релиз на GitHub датирован 2022 годом, а в npm лежит более новая 4.1.4. Поэтому смотрите оба источника и называйте в проекте ту версию, которую реально ставите.

Сравнение плагинов по размеру, лицензии и статусу

Даты релизов взяты из реестра npm и с GitHub на 20 сентября 2026 года. Размер – gzip-оценка bundlephobia для точки входа пакета: у всех плагинов способ измерения один, поэтому цифры сопоставимы по порядку величины. Где данных нет, стоит прочерк: угадывать значение мы не стали.

ПлагинНужен jQueryЛицензияПоследний релизРазмер, gzipTouchLazy loadСтатус
SlickДаMIT2.0.0, 13 сентября 2026 годаоколо 10,5 КБДаДа, lazyLoadПоддерживается: репозиторий не архивирован
bxSliderДаMIT4.2.17, 22 мая 2024 года–Да, touchEnabledНет опции; есть preloadImagesРелизы редкие, следующий после мая 2024 не вышел
Owl Carousel 2ДаMIT2.3.4, 20 апреля 2018 годаоколо 11,5 КБДа, touchDragДа, lazyLoadЗаброшен: автор называет проект почти мёртвым
FlickityНетGPL-3.0 (условия для коммерческих сайтов – на сайте проекта)3.0.0, 5 марта 2022 годаоколо 11,6 КБДаДаПоследний релиз в 2022 году
SwiperНетMIT14.2.0, 26 августа 2026 годаоколо 20 КБДаДа, через loading="lazy"Поддерживается: свежий релиз
SplideНетMITGitHub: 4.1.3, 24 сентября 2022 года; в npm есть 4.1.4около 15,8 КБДа, через dragДаРелизы редкие
Glide.jsНетMIT3.7.1, 22 ноября 2024 годаоколо 7,8 КБДа–Последний релиз в ноябре 2024 года

Размер для bxSlider получить не удалось: сервис bundlephobia в момент проверки не ответил, поэтому строка пустая. Для Swiper цифра относится к точке входа пакета, а не к файлу swiper-bundle.min.js: подключённый по CDN бандл весит больше, потому что содержит все модули.

Как читать таблицу. Колонка «Статус» сведена из проверяемых признаков: архивирован ли репозиторий, что пишет автор, когда вышел последний релиз. Мы не ставим оценок вроде «лучший» или «надёжный»: без нагрузочных тестов они ничего не доказывают. Вывод из таблицы такой: с jQuery живым остаётся Slick, без jQuery – Swiper, а Splide и Glide.js подойдут, когда нужен небольшой слайдер и редкие релизы не пугают.

Плагины на jQuery, которые ещё работают

Все три плагина ниже требуют jQuery. Перед подключением сверьте версию плагина с версией jQuery на сайте: у каждого своя история совместимости.

Slick

Slick распространяется по лицензии MIT. Репозиторий kenwheeler/slick не архивирован: последний коммит от 14 сентября 2026 года, версия 2.0.0 в npm опубликована 13 сентября 2026 года.

Пример карусели на плагине Slick с несколькими слайдами в ряд

Плагин показывает несколько слайдов сразу и меняет их число по точкам адаптивности через параметр responsive. Он листается касанием (touchMove включён по умолчанию), крутится автоматически и подгружает картинки по требованию: lazyLoad принимает значения 'ondemand' и 'progressive'. Параметр accessibility включает навигацию стрелками и табуляцию.

С jQuery всё устроено так. README сообщает, что версия 2.0 совместима с jQuery 4, а для jQuery 3.0 и ниже нужна прежняя версия плагина. Если на сайте стоит jQuery 3, сначала прочитайте этот раздел README, а потом обновляйте Slick. Слаг пакета в npm – slick-carousel.

Практический совет: не обновляйте Slick и jQuery одновременно. Сначала поднимите один, проверьте слайдеры на страницах с разным числом слайдов, потом второй. Так найдёте причину поломки за минуту, а не за вечер.

bxSlider

bxSlider работает по лицензии MIT. Последняя версия в npm – 4.2.17 от 22 мая 2024 года. О jQuery 4 в README и журнале изменений нет ни слова: на четвёрке тестируйте на своём сайте.

Пример адаптивного слайдера контента на плагине bxSlider

Сенсорное управление в документации есть: touchEnabled включён по умолчанию, порог свайпа задаёт swipeThreshold (50 пикселей). Опции ленивой загрузки на странице опций мы не нашли. Есть только preloadImages: она предзагружает картинки перед запуском слайдера, но не грузит их по мере показа. Для страницы с десятками фото это слабое место.

Плагин подходит для простого слайдера, где не нужны сложные сценарии. Данных о размере сборки у нас нет: проверьте в документации проекта, если он для вас критичен. Свежих релизов после мая 2024 года нет, так что для нового проекта Slick надёжнее.

Owl Carousel 2

Owl Carousel 2 выпущен по лицензии MIT и требует jQuery версии 1.8.3 и выше. Последний релиз в npm – 2.3.4 от 20 апреля 2018 года. В начале README автор пишет, что проект почти мёртв, и советует перейти на tiny-slider.

Пример карусели на плагине Owl Carousel 2

Функций у плагина достаточно. Документация описывает touchDrag и mouseDrag для касания и перетаскивания мышью, а lazyLoad подгружает картинки из атрибута data-src. Проблема не в возможностях, а в возрасте: с 2018 года релизов нет, а браузеры и jQuery с тех пор ушли далеко вперёд.

Верхней границы версии jQuery в зависимостях нет, но заявления о совместимости с jQuery 4 нет тоже. Новый проект на нём не начинайте. На старых сайтах он работает, пока их не обновят. Старый Owl Carousel первой версии и Owl Carousel 2 – один продукт, отдельного разбора для первой версии не нужно.

Альтернативы без jQuery

Слайдеры без jQuery подходят и сайтам, где библиотека уже стоит: зависимость от неё не мешает, а обновление jQuery до 4.0 перестаёт быть риском для слайдера. Ниже четыре библиотеки. У каждой свой профиль: Swiper – максимум возможностей, Splide – продуманная доступность, Glide.js – малый размер, Flickity – удобное касание при ограничении по лицензии.

Swiper

Swiper выходит по лицензии MIT и не требует jQuery. Версия 14.2.0 опубликована 26 августа 2026 года – это самый свежий релиз среди слайдеров обзора. Касания и свайп работают из коробки, ленивая загрузка включается атрибутом loading="lazy" на картинке и элементом swiper-lazy-preloader, за доступность отвечает модуль a11y.

Официальная страница «Начало работы» пока даёт CDN-адреса с мажорной версией 12, но файл swiper@14/swiper-bundle.min.js на jsDelivr существует и содержит версию 14.2.0. Слайдер подходит для галерей, карточек товаров и промо-блоков.

Splide

Splide распространяется по лицензии MIT и не имеет зависимостей. Последний релиз на GitHub – 4.1.3 от 24 сентября 2022 года; в npm опубликована и 4.1.4, но дату мы не подтвердили. Gzip-оценка bundlephobia для 4.1.4 – около 15,8 КБ.

Документация описывает параметры perPage, breakpoints, autoplay и lazyLoad. Ленивая загрузка принимает значения false, 'nearby' и 'sequential'. Касание и мышь обрабатывает параметр drag. Брейкпоинты по умолчанию работают по max-width, то есть сначала описывается десктоп.

Доступность у Splide проработана: корневой элемент получает role="region" и aria-roledescription="carousel", есть живая область aria-live="polite". Собственные клавиатурные сочетания вроде стрелок для прокрутки по умолчанию выключены и включаются опцией keyboard.

Почему Splide в обзоре остался, а Owl Carousel 2 нет: у Owl автор сам объявил проект мёртвым и последний релиз датирован 2018 годом, у Splide такой заметки нет, а релизы вышли позже. Но темп у него невысокий. Для промо-блока и галереи этого достаточно, для долгого проекта с новыми требованиями лучше Swiper.

Glide.js

Glide.js – слайдер и карусель на JavaScript ES6 без зависимостей, лицензия MIT. Последняя версия 3.7.1 опубликована в npm 22 ноября 2024 года. Оценка bundlephobia – около 7,8 КБ gzip, это наименьшее значение в таблице, но размер остальных плагинов сравним по порядку, не по килобайтам.

В опциях есть свайп и перетаскивание мышью с настраиваемыми порогами: по умолчанию 80 для свайпа и 120 для перетаскивания. Ленивой загрузки на странице опций нет, картинки придётся грузить нативным loading="lazy". Glide подойдёт, если нужен небольшой слайдер без лишних модулей.

Flickity

Flickity не требует jQuery. В npm у пакета указана лицензия GPL-3.0: она подходит для открытых проектов. Для коммерческого сайта сначала прочитайте лицензионные условия на сайте проекта. В npm последняя версия – 3.0.0 от 5 марта 2022 года.

Плагин листается касанием, а ленивая загрузка задаётся атрибутом data-flickity-lazyload. Документация на сайте описывает версию 2, поэтому сверяйте параметры с той версией, которую ставите. Для клиентских сайтов Flickity стоит брать, только если лицензия подтверждена документально.

Подключение Slick и Swiper с адаптивными точками

Ниже два минимальных примера: Slick для сайта с jQuery и Swiper для сайта без него. Оба показывают адаптивные точки, автопрокрутку и ленивую загрузку. В обоих примерах адреса взяты с CDN: jsDelivr и code.jquery.com.

Slick с адаптивными точками

Разметка – обычный контейнер с вложенными слайдами. В head подключите CSS Slick, перед закрывающим body – jQuery, затем скрипт плагина. Порядок важен: Slick ищет jQuery при загрузке. Пути файлов в пакете slick-carousel@2.0.0 начинаются с slick/. Для jQuery 3 и ниже возьмите версию Slick, которую README называет подходящей.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick-theme.css">
<div class="slider">
  <div>Слайд 1</div>
  <div>Слайд 2</div>
  <div>Слайд 3</div>
  <div>Слайд 4</div>
</div>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.min.js"></script>
<script>
$(function () {
  $('.slider').slick({
    slidesToShow: 3,
    autoplay: true,
    lazyLoad: 'ondemand',
    responsive: [
      { breakpoint: 1024, settings: { slidesToShow: 2 } },
      { breakpoint: 600, settings: { slidesToShow: 1 } }
    ]
  });
});
</script>

На экранах шире 1024 пикселей слайдер показывает три слайда, до 1024 – два, до 600 – один. Картинки грузятся, когда слайд подходит к показу: для этого в разметке адрес пишут в data-lazy вместо src. Свайп включён по умолчанию, отдельно его настраивать не нужно.

Swiper без jQuery

Swiper подключается через CDN. Официальная страница «Начало работы» пока указывает в адресах версию 12, а актуальная версия – 14. В примере адрес с swiper@14: такой файл на jsDelivr есть. Перед выкладкой на рабочий сайт закрепите точную версию.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css">
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Слайд 1</div>
    <div class="swiper-slide">Слайд 2</div>
    <div class="swiper-slide">Слайд 3</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script>
<script>
  new Swiper('.swiper', {
    slidesPerView: 1,
    autoplay: { delay: 4000 },
    pagination: { el: '.swiper-pagination' },
    breakpoints: {
      768: { slidesPerView: 2 },
      1200: { slidesPerView: 3 }
    }
  });
</script>

Swiper реагирует на касание и свайп без дополнительных настроек. Здесь он показывает один слайд на узком экране, два от 768 пикселей и три от 1200. Для ленивой загрузки поставьте на картинки атрибут loading="lazy", а рядом с ними – элемент swiper-lazy-preloader.

Заметьте разницу в логике точек. У Slick breakpoint задаёт максимальную ширину экрана, и настройки идут от большого к малому. У Swiper breakpoints задают минимальную ширину, и настройки идут от малого к большому. Перепутаете – слайдер покажет три карточки на телефоне.

Какой слайдер под задачу

Задача читателя решает выбор чаще, чем список параметров. Ниже – рекомендации по четырём типовым случаям.

  • Галерея. Берите Swiper или Splide: у обоих есть ленивая загрузка, адаптивные точки и описанная доступность. Для галереи на много кадров ленивая загрузка нужна обязательно, иначе страница откроется медленно.
  • Карточки товаров. Если на сайте стоит jQuery, подходит Slick. Он меняет число карточек по точкам, и перенастраивать под мобильные экраны почти ничего не нужно. Без jQuery берите Swiper. Следите, чтобы карточки были одной высоты: иначе слайдер «прыгает» при листании.
  • Промо-блок на главной. Достаточно Glide.js или Splide: слайдер небольшой, без пагинации и вложенных сценариев. Чем меньше сборка, тем быстрее первая отрисовка.
  • Отзывы. Нужен один слайд за раз, автопрокрутка и точки. С этим справится любой плагин из обзора, кроме Owl Carousel 2: он заброшен. Автопрокрутку для длинных отзывов отключайте: читатель не успевает дочитать текст.

Общее правило для любого случая: слайдер не должен быть единственным способом добраться до контента. Поисковик и читатель с отключённым скриптом видят только первый слайд, поэтому важное выносите в текст рядом.

Устаревшие плагины из старых подборок

В подборках 2015 года встречаются плагины, которые не стоит брать в новый проект. Вот те, по которым мы нашли подтверждённые даты.

  • jCarousel: последний релиз 0.3.9 вышел 30 июля 2018 года, последний коммит – 25 апреля 2020 года.
  • FlexSlider: владелец архивировал репозиторий 16 октября 2024 года, на странице написано, что он доступен только для чтения.
  • Elastislide: последний коммит в репозитории codrops/Elastislide датирован 30 апреля 2015 года.

По CarouFredSel, Liquid Carousel, Tiny Circleslider, Thumbelina, Amazing Carousel и Tikslus Carousel подтверждённых данных о поддержке у нас нет. Не выбирайте их для нового проекта, пока не убедитесь, что репозиторий живой и совместим с вашей версией jQuery.

Совет редакции: не выбирайте плагин по демо-странице. Откройте репозиторий, найдите дату последнего релиза, README и раздел о версиях jQuery. Пять минут на проверку избавят от переделки слайдера через год, когда браузеры или jQuery обновятся.

Комментарии

Оставьте свой комментарий
В
Виталий

Спасибо. Интересная подборка

ВК
Валерий К.

Классная подборка. Слайдеры на все случаи жизни. Спасибо.

О
Олег

70% платное

А
Алексей

Сделай сам, бесплатно )

Dendrit

просто нельзя пометить что платное

S
Sergey S.

Отличная подборка, спасибо!