ФронтендjQuery-карусели для сайта

30 января, 2020
30
jQuery-карусели для сайта
Обзор бесплатных адаптивных каруселей с поддержкой свайпа: Slick, Swiper, Owl carousel, Fotorama, lightSlider. Персональный топ-лист каруселей.

Для меня важны следующие моменты

  • адаптивность, возможность указать количество слайдов на определённом разрешении (раздельные брейкпоинты);
  • свайп в девайсах, использование мышки на десктопе;
  • возможность показа одного слайда, определённого количества слайдов или одного слайда с навигацией из миниатюр.

Все указанные в заметке карусели были использованы или используются в настоящее время.

Swiper

На мой взгляд, одно из лучших решений.

Работает «из коробки», даже стили можно не трогать.

Обновляется регулярно.

SCSS, LESS

Минифицированный скрипт: 136Кб

Демонстрация Сайт Github

OWL Carousel

Шикарная простая карусель, с возможностью работать «из коробки» с минимальным дописыванием стилей.

SCSS

Минифицированный скрипт:44Кб

Демонстрация Сайт Github

JQuery lightSlider

Не менее хорошее решение с полной интеграцией lightgallery.js

Лёгкий!

SCSS, LESS

Минифицированный скрипт: 16Кб

Сайт Github

Slick

Шикарная карусель с поддержкой всего.

Минифицированный скрипт: 52Кб

SCSS, LESS

Сайт Github

Fotorama

Отличное решение для интернет-магазинов. Кстати, Fotorama используется в miniShop2.

Из минусов: не поддерживается более 5 лет.

SCSS

Минифицированный скрипт: отсутствует

Скрипт: 38Кб

Сайт

Теги:

Поделиться