30 адаптивных jQuery-плагинов для создания каруселей и слайдеров

В интернете можно встретить множество великолепных плагинов для создания jQuery каруселей и слайдеров. Они позволяют реализовать динамический скроллинг с дополнительными эффектами.

Это один из популярнейших трендов в веб-дизайне за последние несколько лет. Кроме этого использование готовых библиотек и jQuery-плагинов позволяет существенно сэкономить время. Все что нужно, это указать ссылку на JavaScript и CSS-файлы, а затем применить эффект к нужным HTML-элементам.

Также можно установить собственные настройки и CSS-стили. Сегодняшняя статья направлена на то, чтобы познакомить вас адаптивными jQuery-плагинами для создания каруселей и слайдеров.

Distractful – jQuery-плагин для создания сенсорного полноэкранного слайдера контента

Адаптивный полноэкранный слайдер карусель jQuery контента с поддержкой сенсорных экранов. Плагин распространяется под лицензионным соглашением GNU GENERAL PUBLIC LICENSE v3:

distractful_touchable_fullscreen_content_slider_plugin_for_jquery

Neoslide: простенький и расширяемый плагин jQuery-карусели

Простой и расширяемый jQuery-плагин, который позволит вам использовать полностью настраиваемый слайдер на любой веб-странице:

carousel_slider_jquery_responsive_free_download

Hslider: плагин адаптивной галереи изображений на всю ширину страницы

Еще один плагин для демонстрации изображений при помощи адаптивной карусели jQuery с элементами управления и настраиваемой длительностью задержки:

carousel_slider_jquery_responsive_free

Carousel 3D: плагин jQuery-карусели с трехмерными эффектами вращения

carousel_3d_simple_jquery_carousel_plugin_with_3d_rotating_effects

Sleek Slider: адаптивная jQuery-карусель на весь экран

Миниатюрная и привлекательная jQuery-карусель для демонстрации контента и изображений с различными видами навигации (SVG-стрелки с миниатюрами изображений, элементы пагинации или вкладки):

Sleek_Slider_Responsive_Full_Width_jQuery_Carousel

PaW Carousel: адаптивная карусель на базе jQuery

PaW Carousel (v2) представляет собой миниатюрный плагин для создания адаптивных, простых каруселей jQuery с выводом миниатюр изображений:

Responsive-jQuery-Based-Carousel-with-Thumbnail

Carousel Sharer: jQuery-карусель для репостов в социальные сети

Carousel Sharer – это jQuery-плагин, который позволяет демонстрировать несколько товаров в ряд, и дает возможность посетителям делиться вашими товарами в Facebook, Twitter, Google+ и Pinterest:

Carousel_Sharer

Simply Carousel: минималистичная адаптивная карусель изображений

Simply Carousel представляет собой миниатюрный и быстрый jQuery-плагин, который позволяет создавать гибкие адаптивные слайдеры и карусели изображений:

Simply_Carousel_Minimal_Responsive_Image_Carousel

Slides: адаптивная jQuery-карусель и слайд-шоу с поддержкой сенсорных устройств

Slides – миниатюрный jQuery-плагин для создания адаптивных каруселей для сайта jQuery с миниатюрами, стрелочной навигацией и возможностью использовать собственные элементы управления. Реализована поддержка сенсорных экранов:

Responsive-Touch-Enabled-jQuery-Carousel-Slideshow

Карусель для контента на jQuery

Простая адаптивная jQuery-карусель с функциями автоматического воспроизведения, элементами управления и даже callback-функциями:

Flexible_Content_Carousel_Plugin_with_jQuery

Slick: адаптивная и гибкая jQuery-карусель

Slick представляет собой «свежий» плагин для создания настраиваемых, адаптивных и оптимизированных под мобильные устройства jQuery каруселей и слайдеров, способных работать с любыми HTML-элементами:

Slick_Responsive_Flexible_jQuery_Carousel

bxSlider: слайдер HTML-контента на jQuery

bxSlider – один из лучших jQuery-слайдеров контента, доступных на сегодняшний день. Этот плагин отлично подойдет для организации слайд-шоу:

bxslider

CarouFredSel: гибкий и мощный плагин jQuery-карусели

jQuery.carouFredSel представляет собой плагин, который превращает любой HTML-элемент в карусель контента. В нем можно прокручивать один или несколько элементов одновременно как горизонтально, так и вертикально. Также можно включить автоматическое воспроизведение и сделать прокрутку бесконечной:

caroufredsel

Циклическая карусель контента на jQuery

Карусель, в которой каждый клик будет раскрывать новый блок контента. Нажатие по крестику приведет к закрытию активного блока и вернет нас на исходную позицию просмотра миниатюр:

Circular-Content-Carousel-with-jQuery

Cloud Carousel: 3D-карусель на Javascript

Эта карусель позволяет создать реалистичную перспективу. Многие 3D карусели jQuery применяют эффект перспективы лишь к размеру изображения, а не к его расположению, что приводит к диспропорции элементов на странице:

Cloud-Carousel-A-3d-Carousel-in-Javascript

Elastislide: адаптивная карусель на jQuery

Elastislide представляет собой адаптивную jQuery-карусель, которая подстраивается под экраны любого размера. Вставка карусели в контейнер с гибкой шириной сделает «резиновой» и саму карусель:

Elastislide

jCarousel Lite

С помощью этого плагина вы сможете просматривать изображения или HTML-элементы в виде слайдера. Он весит всего 2Кб, но при этом позволяет использовать собственные настройки:

jCarousel-Lite

3D Carousel

Создайте 3D карусель jQuery из изображений с эффектами тени и анимацией, реагирующей на положение курсора:

jQuery-3D-Carousel

Плагин JQuery carousel

Настройки этого плагина позволяют определить, сколько элементов будет отображено в карусели, после чего плагин адаптирует ее под нужную ширину:

jquery-carousel-plugin

Вращающийся слайдер изображений на jQuery

Ассиметричный слайдер изображений с небольшим дополнением: при прокрутке изображений они слегка поворачиваются. За счет небольшого смещения элементов слайдер приобретает необычную форму:

jquery-carousel-plugins

JQuery Feature Carousel

Этот плагин предназначен для отображения рекомендованных статей на главной странице, но его также можно использовать для любого другого контента. Он позволяет одновременно показывать до трех изображений, в то время как остальные элементы jQuery карусели контента скрыты:

jQuery-Feature-Carousel

jQuery Infinite Carousel

Представляет собой jQuery-плагин, который позволяет демонстрировать неограниченное количество изображений и видеороликов в карусели. В отличие от остальных каруселей, Infinite Carousel показывает элементы бесконечным циклом без необходимости пользоваться навигацией:

jQuery-Infinite-Carousel-Plugin

jQuery-плагин Liquid Carousel

Liquid Carousel представляет собой плагин, предназначенный для создания «текучих» дизайнов. Каждый раз, когда контейнер адаптивной карусели jQuery изменяется в размере, количество отображаемых элементов подстраивается под новую ширину:

jQuery-Liquid-Carousel-Plugin

Jquery MS Carousel

Способы применения этого плагина не ограничены: используйте его с DIV, LI или любым другим элементом. Кроме этого можно создавать собственную разметку. У каждой карусели будет свой внешний вид и принцип действия. Самый важный момент заключается в том, что инструмент возвращает объект carousel, с которым можно осуществлять любые операции:

jquery-ms-carousel

jQuery Waterwheel Carousel

Этот jQuery-плагин способен отображать изображения в каскадном стиле. Его можно расположить как горизонтально, так и вертикально, а также добавить собственные события, которые будут запускаться при прокрутке изображений. Callback-функции можно использовать в качестве программируемого триггера для эффектов в стиле Lightbox или же для загрузки контента из других разделов сайта:

jquery-waterwheel-carousel

Новая версия RCAROUSEL

На данный момент разработка Rcarousel приостановлена из-за нехватки времени у разработчика. Стоит отметить, что при указании авторства вы можете делать с этим плагином все, что захотите:

Rcarousel

Roundabout

Плагин, который без труда конвертирует неупорядоченные списки и другие вложенные HTML-структуры в привлекательные и интерактивные компоненты. Им можно пользоваться сразу же без каких-либо настроек. Кроме этого Roundabout позволяет вносить любые настройки в jQuery карусель при помощи расширяемого API:

Roundabout

Monte: плагин карусели для изображений и HTML

Monte

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

Перевод статьи “30 Flexible Carousel Slider jQuery Responsive Free Download” был подготовлен дружной командой проекта Сайтостроение от А до Я.