26 бесплатных адаптивных jQuery-слайдеров изображений
Адаптивные jQuery-слайдеры позволяют просто организовать галереи изображений и добавить интерактивность на страницы сайта. Они упрощают работу с фото и делают интерфейс более удобным для посетителей.
Вы сможете выбрать подходящий плагин из подборки, быстро внедрить слайдер, настроить эффекты и адаптировать его под свой проект. Практические примеры и документация помогут эффективно использовать плагины без лишних усилий.
- JQuery-слайдеры изображений
- Jssor Responsive Slider
- PgwSlider - адаптивный слайдер на основе JQuery / Zepto
- Jquery Vertical News Slider
- Wallop Slider
- Flat-style Polaroid gallery
- A-Slider
- HiSlider – HTML5, jQuery и WordPress слайдер изображений
- Wow Slider
- Nivo Slider – бесплатный jQuery-плагин
- Простой JQuery слайдер с технической документацией
- Полноразмерный JQuery-слайдер изображений
- Elastic Content Slider + пособие
- Free 3D Stack Slider
- Fullscreen Slit Slider на основе JQuery и CSS3 + руководство
- Unislider – очень маленький JQuery-слайдер
- Minimal Responsive Slides
- Camera - бесплатный JQuery слайдер
- SlidesJS, адаптивный JQuery плагин
- BX Jquery Slider
- FlexSlider 2
- Galleria - адаптивная фотогалерея на основе JavaScript
- Blueberry - простой адаптивный JQuery-слайдер изображений
- JQuery Popeye 2.1
- FractionSlider- бесплатный плагин JQuery слайдера с эффектом параллакса
- Free Responsive Image Slider с руководством
- Sequence - бесплатный плагин с функцией CSS3-переходов
- Swipe - бесплатный адаптивный сенсорный слайдер
JQuery-слайдеры изображений
Jssor Responsive Slider
Недавно я наткнулась на этот функциональный JQuery-слайдер, и смогла воочию убедиться, что он справляется со своей работой очень хорошо. Он содержит в себе безграничные возможности, которые можно расширить за счет открытого исходного кода слайдера:
- Адаптивный дизайн;
- Более 15 параметров настройки;
- Более 15 эффектов смены изображения;
- Поддержка сенсорных устройств;
- Галерея изображений, карусели, поддержка полноэкранного размера;
- Вертикальный ротатор баннеров, список слайдов;
- Поддержка видео.
Демо| Скачать

PgwSlider - адаптивный слайдер на основе JQuery / Zepto
Единственной задачей данного плагина является демонстрация слайдов изображений. Он очень компактный, так как размер JQuery-файлов составляет всего 2,5 КБ, что позволяет подгружать его действительно быстро:
- Адаптивный макет;
- SEO-оптимизация;
- Поддержка разными браузерами;
- Простые переходы изображений;
- Размер архива всего 2,5 КБ.
Демо| Скачать

Jquery Vertical News Slider
Гибкий и полезный JQuery-слайдер, предназначенный для новостных ресурсов с перечнем публикаций с левой стороны и выводом изображения справа:
- Адаптивный дизайн;
- Вертикальная колонка переключения новостей;
- Расширенные заголовки.
Демо| Скачать

Wallop Slider
Этот слайдер не содержит JQuery, но я хотел бы представить его, так как он очень компактный и позволяет существенно уменьшить время загрузки страниц. Дайте мне знать, если он вам понравится:
- Адаптивный макет;
- Простой дизайн;
- Различные варианты смены слайдов;
- Минимальный код JavaScript;
- Размер всего 3KБ.
Демо| Скачать

Flat-style Polaroid gallery
Галерея в стиле разбросанных на столе документов с гибким макетом и красивым дизайном должна заинтересовать многих из вас. Больше подходит для планшетов и больших дисплеев:
- Адаптивный слайдер;
- Плоский дизайн;
- Случайная смена слайдов;
- Полный доступ к исходному коду.
Демо| Скачать

A-Slider
- Адаптивный слайдер;
- Поддержка аудио;
- CSS3 переходы;
- Настройки аудио для каждого слайда;
- Представление любого типа контента, не только изображений;
- Не требует ничего, кроме JQuery;
- Хорошо работает с Twitter BootStrap.
Демо| Скачать

HiSlider – HTML5, jQuery и WordPress слайдер изображений
HiSlider представил новый бесплатный плагин JQuery-слайдера, с помощью которого можно создавать разнообразные галереи изображений с фантастическим переходами:
- Адаптивный слайдер;
- Не требует знания программирования;
- Несколько удивительных шаблонов и скинов;
- Красивые эффекты переходов;
- Поддержка разных платформ;
- Совместимость с WordPress, Joomla, Drupal;
- Возможность отображения контента разных типов: изображений, видео YouTube и видео Vimeo;
- Гибкая настройка;
- Полезные дополнительные функции;
- Неограниченный объем отображаемого контента.
Демо|Скачать

Wow Slider
WOW Slider - это адаптивный JQuery-слайдер изображений с удивительными визуальными эффектами (домино, поворот, размытие, переворот и вспышка, вылет, жалюзи) и профессиональными шаблонами.
WOW Slider поставляется вместе с мастером установки, что позволяет создавать фантастические слайдеры за считанные секунды без необходимости разбираться в коде и редактировать изображения. Также доступны для скачивания версии плагина под Joomla и WordPress:
- Полностью адаптивный;
- Поддержка всех браузеров и всех типов устройств;
- Поддержка сенсорных устройств;
- Простая установка на WordPress;
- Гибкость в настройке;
- SEO-оптимизированный.
Демо|Скачать

Nivo Slider – бесплатный jQuery-плагин
Nivo Slider известен всему миру как самый красивый и простой в использовании слайдер изображений. Плагин Nivo Slider является бесплатным и выпускается по лицензии MIT:
- Требуется JQuery 1.7 и выше;
- Красивые эффекты перехода;
- Простой и гибкий в настройке;
- Компактный и адаптивный;
- Открытый код;
- Мощный и простой;
- Несколько различных шаблонов;
- Автоматическая обрезка изображения.
Демо|Скачать

Простой JQuery слайдер с технической документацией
Идея была навеяна слайдерами от Apple, в которых несколько маленьких элементов могут вылетать с различными эффектами анимации. Разработчики попытались воплотить эту концепцию с учетом минимальных требований для создания простого дизайна интернет-магазина, в котором «вылетающие» элементы представляют собой различные категории:
- Адаптивный макет;
- Минималистичный дизайн;
- Различные эффекты выпадения и смены слайдов.
Демо|Скачать

Полноразмерный JQuery-слайдер изображений
Очень простой слайдер, занимающий 100% ширины страницы и подстраивающийся под размеры экранов мобильных устройств. Он работает с CSS переходами, а изображения «укладываются» вместе с анкорами. Анкор может быть заменен или удален, если вы не хотите привязывать к изображению ссылку.
При установке слайдер разворачивается на 100% ширины экрана. Также он может автоматически уменьшает размер изображений слайдов:
- Адаптивный JQuery-слайдер;
- Полноразмерный;
- Минималистичный дизайн.
Демо|Скачать

Elastic Content Slider + пособие
Elastic Content Slider автоматически регулирует ширину и высоту в зависимости от размеров родительского элемента. Это простой JQuery-слайдер. Он состоит из слайд-зоны вверху, и панели навигационных вкладок в нижней части. Слайдер подстраивает свою ширину и высоту в соответствии с размерами родительского контейнера.
При просмотре на маленьких по диагонали экранах вкладки навигации превращаются в маленькие иконки:
- Адаптивный дизайн;
- Прокрутка кликом мыши.
Демо|Скачать

Free 3D Stack Slider
Экспериментальный слайдер, пролистывающий изображения в 3D. Два стека напоминают стопки бумаги, из которых при пролистывании изображения выводятся в центр слайдера:
- Адаптивный дизайн;
- Flip-переход;
- 3D-эффекты.
Демо|Скачать

Fullscreen Slit Slider на основе JQuery и CSS3 + руководство
Из руководства вы узнаете, как создать слайдер с изюминкой: идея заключается в том, чтобы «разрезать» и вывести в таком виде текущий слайд, в то время, когда вы открываете следующее или предыдущее изображение. Используя JQuery и CSS-анимацию, мы можем создавать уникальные эффекты переходов:
- Адаптивный дизайн;
- Сплит-переход;
- Полноэкранный слайдер.
Демо|Скачать

Unislider – очень маленький JQuery-слайдер
Никаких ненужных наворотов и разметки, размер менее 3КБ. Используйте любой HTML-код для своих слайдов, расширяйте его с помощью CSS. Все, что связано с Unslider, размещается на GitHub:
- Поддержка различными браузерами;
- Поддержка клавиатуры;
- Регулировка по высоте;
- Адаптивный дизайн;
- Поддержка сенсорного ввода.
Демо | Скачать

Minimal Responsive Slides
Простой и компактный плагин (размер всего 1 Кб), который создает адаптивный слайдер, используя элементы внутри контейнера. ResponsiveSLides.js работает с большим количеством браузеров, включая все версии IE от IE6 и выше:
- Полностью адаптивный;
- Размер 1 КБ;
- CSS3 переходы с возможностью запуска через JavaScript;
- Простая разметка с использованием маркированного списка;
- Возможность настройки эффектов переходов и длительности просмотра одного слайда;
- Поддерживает возможность создания нескольких слайд-шоу;
- Автоматическая и ручная прокрутка.
Демо|Скачать

Camera - бесплатный JQuery слайдер
Camera - плагин с множеством эффектов переходов, адаптивным макетом. Прост в настройке, поддерживается мобильными устройствами:
- Полностью адаптивный дизайн;
- Подписи;
- Возможность добавления видео;
- 33 различных цвета иконок.
Демо|Качать

SlidesJS, адаптивный JQuery плагин
SlidesJS - это адаптивный плагин для JQuery (1.7.1 и выше) с поддержкой сенсорных устройств и CSS3-переходов. Поэкспериментируйте с ним, попробуйте несколько готовых примеров, которые помогут вам разобраться, как добавить SlidesJS в свой проект:
- Адаптивный дизайн;
- CSS3-переходы;
- Поддержка сенсорных устройств;
- Прост в настройке.
Демо | Скачать

BX Jquery Slider
Это бесплатный адаптивный JQuery слайдер:
- Полностью адаптивный - подстраивается под любое устройство;
- Горизонтальная, вертикальная смена слайдов;
- Слайды могут содержать изображения, видео или HTML-контент;
- Расширенная поддержка сенсорных устройств;
- Использование CSS-переходов для слайд-анимации (аппаратное ускорение);
- API обратных вызовов и полностью публичные методы;
- Небольшой размер файла;
- Прост в реализации.
Демо|Скачать

FlexSlider 2
Лучший адаптивный слайдер. Новая версия была доработана с целью увеличения скорости работы, компактности.
Демо | Скачать

Galleria - адаптивная фотогалерея на основе JavaScript
Galleria используется на миллионах сайтов для создания галереи изображений в высоком качестве. Количество позитивных отзывов о ее работе просто зашкаливает:
- Полностью бесплатный;
- Режим полноэкранного просмотра;
- 100% адаптивный;
- Не требуется опыта программирования;
- Поддержка iPhone, IPad и других сенсорных устройств;
- Flickr, Vimeo, YouTube и многое другое;
- Несколько тем.
Демо | Скачать

Blueberry - простой адаптивный JQuery-слайдер изображений
Представляю вам JQuery-слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry - это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами:
- Минимальный дизайн;
- Адаптивный макет;
- Презентации.
Демо | Скачать

JQuery Popeye 2.1
Используются стандартные элементы первой версии программы: слайдер скрывается в левую сторону и всплывает направо. Те же элементы навигации и подписи, всплывающие при наведении курсора мыши:
- Адаптивный дизайн;
- Поддержка подписей;
- Режим слайд-шоу.
Демо | Скачать

FractionSlider- бесплатный плагин JQuery слайдера с эффектом параллакса
Попробуйте этот удивительный плагин. Анимация нескольких элементов при выводе изображений с настройкой каждого из них. FractionSlider - это JQuery-плагин для изображений или текста. Он позволяет анимировать сразу несколько элементов слайда. Вы можете установить различные методы анимации, такие как смена кадров или переход в определенном направлении:
- Адаптивный дизайн;
- Анимация элементов;
- Управление настройками анимации;
- Фоновая анимация.
Демо|Скачать

Free Responsive Image Slider с руководством
С помощью FlexSlider мы можем составить код слайдера с «импрессионистским» интерфейсом. Плагин позволяет добавлять функционал и стили через CSS3. Я надеюсь, он вам понравится, и вы используете его в своих проектах. Давайте перечислим его функции:
- Адаптивный дизайн;
- Fade эффекты;
- Стрелки влево, вправо;
- Зеленые кнопки.
Демо|Скачать

Sequence - бесплатный плагин с функцией CSS3-переходов
Поставляется с четырьмя темами, и только самые навороченные из них, такие как слайдер в стиле Аpple и слайдер с горизонтальным параллаксом не являются адаптивными:
- Три бесплатных темы;
- Раздвижной горизонтальный параллакс;
- Стиль Apple;
- Адаптивные темы;
- Поддержка сенсорных устройств;
- Простая модификация;
- Поддержка разными браузерами.
Демо|Скачать

Swipe - бесплатный адаптивный сенсорный слайдер
- Адаптивный;
- Жесткие пропорции;
- Возможность фиксации кадра;
- Совместимость с IE7 и выше.
Демо|Скачать

Комментарии
а как в Jssor Responsive Slider развернуть фото на весь экран?