Рассмотрим несколько удивительно легких и свободных от зависимостей библиотек JavaScript для создания каруселей на вашем сайте.
Что такое карусель?
Карусель в основном отображает изображения, продукты, логотипы, цитаты или отзывы в формате слайд-шоу. Мы можем сдвигать элементы карусели влево или вправо с помощью щелчка мыши, сенсорного ввода или стрелок клавиатуры.
Иногда карусели путают со слайдерами, хотя по сути это очень близкие понятия и оба эти понятия мы часто видим на сайтах любой направленности, будь то просмотр фото, отзывов или какой-либо другой информации. Один из ярких примеров статичной карусели — это пост в Инстаграм с несколькими фото.
1. Glide.js
Не зависящий от JavaScript ES6 слайдер и карусель. Он легкий, гибкий и быстрый. Предназначен для слайдеров. Функционала в нем ровно столько сколько нужно, не меньше, не больше.
Это одна из самых популярных библиотек JavaScript для создания каруселей. Карусели в этой библиотеке могут содержать несколько элементов управления, например, стрелки и буллеты.
Самое приятной, что весит такая библиотека всего ~28 кб (~8 кб в Zip).
Ссылка: glidejs.com
Демо: glidejs.com/docs
2. Splide
Splide — это легкий, мощный и гибкий слайдер и карусель, написанный на чистом (ванильном) JavaScript без каких-либо зависимостей.
Имеет небольшой размер, менее 29 кБ (11 кБ в сжатом виде). Библиотека также имеет такие возможности, как гибкость и расширяемость, множественность слайдов, отзывчивость и поддержка точек прерывания, использование относительных единиц CSS, таких как vw, %, rem и т.д.
Ссылка: splidejs.com
Демо: splidejs.com/thumbnail-slider
3. Swiper
Swiper — это самый современный бесплатный мобильный сенсорный слайдер с аппаратным ускорением переходов и удивительным нативным поведением.
Он предназначен для использования в мобильных веб-сайтах, мобильных веб-приложениях и мобильных нативных/гибридных приложениях, но мы также можем использовать его для десктопных версий в качестве карусельного слайдера.
Ссылка: swiperjs.com
Демо: swiperjs.com/demos
4. Flickity
Flickity — это потрясающая сенсорная, отзывчивая, перелистываемая библиотека каруселей. Она проста в использовании. Flickity делает карусели, галереи и слайдеры живыми и легкими.
Ссылка: flickity.metafizzy.co
Демо: flickity.metafizzy.co/#feature-showcase
5. Glider.js
Молниеносно быстрый, безумно маленький, полностью отзывчивый, удобный для мобильных устройств, свободный от зависимостей, нативный прокручивающийся список с элементами управления пагинацией.
Вес библиотеки в сжатом виде < 2.8 кб. Заявленная инициализация всего 25 мс. Создана на ванильном JS!
Glider.js сохраняет возможность использования нативной прокрутки, создавая естественное ощущение на любом устройстве с поддержкой сенсорного ввода, и при этом обеспечивает базовую эстетику и функциональность карусели. Отлично подходит для десктопных версий!
Ссылка: nickpiscitelli.github.io/Glider.js
Демо: nickpiscitelli.github.io/Glider.js/#demos
6. Embla Carousel
Легкая библиотека каруселей с плавным движением и высокой точностью пролистывания.
Вы можете сами расширять Embla Carousel с помощью собственных CSS и JavaScript для создания собственных удивительные каруселей.
Ссылка: embla-carousel.com
Демо: embla-carousel.com/examples
7. Tiny Slider 2
Крошечный слайдер для любых целей, созданный по мотивам Owl Carousel.
Owl Carousel — это старый карусельный слайдер на основе jQuery, который сейчас считается устаревшим и почти не используется.
Tiny slider имеет удивительные возможности, такие как цикл, перемотка, пролистывание, ленивая загрузка, отзывчивость и многое другое.
Ссылка: ganlanyuan.github.io/tiny-slider
Демо: ganlanyuan.github.io/tiny-slider/demo
Заключение
Я надеюсь, что эти JavaScript библиотеки каруселей помогут вам быстро создавать удивительные карусели и обеспечат все основные эстетические и функциональные возможности.
Если вы знаете еще какие-нибудь свободные от зависимостей JavaScript-библиотеки каруселей, которые вы предпочитаете использовать для этих целей, пожалуйста, напишите о них в комментариях ниже. Это поможет многим коллегам.
