26 бесплатных адаптивных jQuery-слайдеров изображений

Если вам нужно добавить на свой сайт качественный JQuery-слайдер изображений, то в этой статье вы найдете описание нужных плагинов. Несмотря на то, что JQuery существенно упростил работу с JavaScript, мы по-прежнему нуждаемся в плагинах, чтобы ускорить процесс создания веб-дизайна.

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

Для других слайдеров достаточно просто добавить заголовки, изображения и выбрать эффекты для смены слайдов, которые поставляются вместе со слайдером. Все эти плагины сопровождаются подробной документацией, так что добавить к ним новые эффекты или функции не составит большого труда. Вы даже можете изменить триггеры, зависящие от событий, если являетесь опытным программистом JQuery.

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

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 и выше.

Демо|Скачать