Безкоштовні адаптивні jQuery слайдери зображень

73

Адаптивний, або якщо хочете, чутливий веб-дизайн зараз не просто черговий дизайнерський тренд, це вже якийсь стандарт розробки сайтів, що забезпечує універсальність веб-сайтів, гармонійне візуальне сприйняття на екранах різних користувацьких пристроїв. Ще зовсім недавно, при розробці адаптивного шаблону, мені доводилося стикатися з різними труднощами інтеграції тих чи інших слайдерів і галерей зображень, не порушуючи загальний дизайнерський стиль. Зараз все набагато простіше, в мережі існує величезна кількість готових рішень і що особливо радує, більшість з них у вільному доступі, з відкритим вихідним кодом.

З причини різноманіття пропонованих інструментів, я склав невеликий огляд найбільш помітних розробок адаптивних jQuery слайдерів зображень, що з’явилися останнім часом і які розповсюджуються без будь-яких обмежень, тобто абсолютно безкоштовно.


WOW Slider

Адаптивний jQuery слайдер зображень з чудовим набором візуальних ефектів (повороти, вильоти, розмиття, спіралі, жалюзі і т. д…) та безліччю готових шаблонів. За допомогою вбудованого в WOW Slider майстра вставки на сторінку, ви зможете легко і невимушено створювати приголомшливі слайд-шоу за лічені хвилини . На сайті розробника є вся необхідна документація по налаштуванню і використання плагіна Російською мовою, відмінні живі приклади роботи плагіна. Також доступні для скачування окремий плагін WordPress і модуль для Joomla. Впевнений, що багатьом сподобається цей чудовий слайдер, як новачкам, так і набила руку веб-майстром.

WOW Slider - Адаптивный слайдер изображений

ДемоСкачать

HiSlider

HiSlider — HTML5, Jquery слайдер і галерея зображень, абсолютно безкоштовний плагін для особистого користування на сайтах під управлінням популярних систем — WordPress, Joomla, Drupal. З допомогою цього простого, але досить функціонального інструменту, ви зможете без особливих зусиль створювати на сторінках своїх сайтів, дивовижні і яскраві слайд-шоу, ефектні презентації та анонси нових повідомлень. Декілька готових шаблонів і скінів для слайдера, приголомшливі ефекти переходу(зміни) змісту, висновок різного мультимедійного контенту: зображення, відео з YouTube і Vimeo, гнучкі настройки і т. д…

HiSlider - Адаптивный слайдер и галерея изображений

ДемоСкачать

Nivo Slider

Nivo Slider — старий-добрий, добре відомий усім, хто в темі, один з найкрасивіших і простих у використанні слайдер зображень. Плагін JQuery Nivo Slider є безкоштовним для завантаження і подальшого використання, поширюється під ліцензією MIT. Так само є окремий плагін для WordPress, але на жаль вже платний і відвалити за нього доведеться 29$ за одну ліцензію. Краще все ж трохи почаклувати з файлами теми WP і прикрутити вільну jQuery версію плагіна Nivo Slider до свого блогу, благо інфи як це зробити в мережі достатньо.
Що стосується функціоналу, з цим все в повному порядку. Для роботи використовується бібліотека jQuery v1.7+, красиві ефекти переходів, прості і дуже гнучкі налаштування, адаптивний макет, автоматична обрізка зображення і багато іншого.

Nivo Slider - адаптивный слайдер изображение

ДемоСкачать

Multi-Item jQuery Slider

Ідея слайдера була навіяна розробникам, добре відомим всім стилем представлення продукції Apple, де кілька невеликих предметів(картинок) змінюються по кліку на обрану категорію з простеньким ефектом анімації. Codrops надає у ваше розпорядження докладний урок по створенню цього слайдера, повний розклад Html-розмітки, набір правил CSS і виконуваний jQuery плагін, а так само чудовий живий приклад використання слайдера.

Multi-Item jQuery Slider

ДемоСкачать

Slit Slider

Повноекранний слайдер зображень на JQuery і CSS3 + докладний підручник з інтеграції плагіна на сторінки сайту. Ідея полягає в тому, щоб нарізати відкритий поточний слайд з певним контентом при переході до наступного або попереднього утримання. За допомогою JQuery і CSS-анімації ви зможете створювати унікальні переходи між слайдами. Адаптивний макет слайдера гарантує, що він буде однаково добре виглядати на екранах різних типах пристроїв.

Полноэкранный Slit Slider с адаптивным дизайном

ДемоСкачать

Elastic Content Slider

Слайдер змісту, який автоматом регулюється по ширині і висоті в залежності від розмірів батьківського контейнера, в якому розташований. Досить простий у виконанні і гнучкий у налаштуваннях слайдер працює на JQuery, з навігацією в нижній частині, при зміні розміру екрану в бік зменшення, навігація виводиться у вигляді іконок. Дуже докладна документація(урок по створенню) і живі приклади використання.

Elastic Content Slider - адаптивный слайдер содержания

ДемоСкачать

3D Stack Slider

Експериментальний варіант слайдера, який демонструє зображення з переходами з площини 3D. Зображення розбиті на дві горизонтальні стопки, з допомогою стрілок навігації здійснюється зміна і перехід кожної наступної картинки в стан перегляду. Загалом нічого особливого, але сама ідея і техніка виконання досить цікаві.

3D Stack Slider - адаптивный слайдер

ДемоСкачать

Повноекранний слайдер зображень

Дуже простий, 100% адаптивний і повноекранний jQuery слайдер зображень. Робота слайдера заснована на CSS переходах(властивість transition) в зв’язці з магією jQuery. Значення max-width за умовчанням встановлено на 100%, по-цьому розмір картинок буде змінюватися в залежності від змін розмірів екрану. Ні яких особливих анімаційних ефектів і вишукувань в оформленні, все просто, і заточене на безперебійну роботу.

Полноэкранный слайдер изображений

ДемоСкачать

Unislider

Відмінний jQuery слайдер картинок з серії широкоформатних слайд-шоу в шапці сайту. Дуже легкий у всіх відносинах(архів зkb), без фантастичних ефектів і зайвої розмітки. Ви можете використовувати практично будь-які елементи html в слайдах, розширюючи його можливості(оформлення) за допомогою CSS. Повний контроль всіх налаштувань і функцій. Вся документація у відкритому доступі на GitHub.

Unislider - Широкоформатный слайдер картинок

Демо Завантажити

Minimal Slides

Назва говорить сама за себе, це мабуть один з найбільш легких і мінімалістичний jQuery слайдерів зображень, які мені зустрічалися(плагін в 1kb). ResponsiveSlides.js -крихітний плагін JQuery, який створює слайд-шоу, використовуючи елементи всередині контейнера. Працює з широким діапазоном браузерів, включаючи всі версії IE — знаменитого гальма прогресу, від IE6 і вище. В роботі використовуються переходи CSS3 в зв’язці з javascript, для надійності. Проста розмітка з використанням неупорядкованого списку, настроювання переходів і часових інтервалів, автоматичне і ручне керування перемиканням слайдів, а так само підтримка відразу декількох слайд-шоу. Ось такий жвавий «малюк».

Minimal Slides - Адаптивный jQuery слайдер

ДемоСкачать

Camera

Camera — безкоштовний JQuery плагін для організації слайд-шоу на сторінках сайтів, легкий слайдер з безліччю ефектів переходів, з 100% адаптивним макетом, і дуже простими налаштуваннями. Чудово впишеться на екрани будь-яких пристроїв(монітори ПК, планшети, смартфони та мобільні телефони). Можливість демонстрації вбудованого відео. Автоматична зміна слайдів і ручне управління за допомогою кнопок і блоку мініатюр. Практично повноцінна галерея зображень в компактному виконанні.

Camera - Бесплатный jQuery слайдер

ДемоСкачать

bxSlider jQuery

Ще один, досить простий адаптивний слайдер на jQuery. У слайдах можна розміщувати будь-який контент, відео, зображення, текст та інші елементи. Розширена підтримка сенсорних екранів. Використання CSS-анімації переходів. Велика кількість різних варіацій подання слайд-шоу і компактних галерей зображень. Автоматичне і ручне управління. Перемикання слайдів за допомогою кнопок і за допомогою вибору мініатюр. Невеликий розмір вихідного файлу, дуже простий в налаштуваннях і реалізації.

bxSlider - Адаптивный слайдер плагин jQuery

ДемоСкачать

FlexSlider 2

FlexSlider 2 — Оновлена версія однойменного слайдера, з покращеною швидкістю реагування, минификацией скрипта, і зведенням до мінімуму перекомпонування/перемальовування. Плагін включає в себе базовий слайдер, контроль керування слайдами за допомогою мініатюр, вбудованих стрілок вліво-вправо і нижній панелі навігації у вигляді кнопок. Можливість виводу в слайдах відео(vimeo), гнучкі настройки параметрів(переходи, оформлення, тимчасової інтервал), повністю адаптивний макет.

FlexSlider 2 - адаптивный слайдер изображений

Демо Завантажити

Galleria

Добре відомий і досить популярний, адаптивний плагін jQuery для створення високоякісних галерей і слайдерів зображень. Інтерфейс слайдера, завдяки його панелі управління візуально нагадує звичний відеоплеєр, до складу плагіна входить кілька різних тем оформлення. Підтримка вбудованого відео і зображень з популярних сервісів: Flickr, Vimeo, YouTube та інших. Докладна документація по налаштуванню і використання.

Galleria - галерея и слайдер изображений

Демо Завантажити


Blueberry

Простий без наворотів безкоштовний JQuery слайдер зображень, написаний спеціально для адаптивного веб-дизайну. Blueberry є експериментальним JQuery плагіном з відкритим вихідним кодом. Мінімалістичний дизайн, ніяких ефектів, тільки плавно спливаючі картинки змінюють один одного через певний проміжок часу. Все дуже просто, поставив, підключив і вперед…

Blueberry - простой адаптивный слайдер

Демо Завантажити

jQuery popeye 2.1

Дуже компактний jQuery слайдер зображень з елементами Lightbox. Завдяки своїм гнучким розмірами, дуже просто вбудовується в будь-який контейнер, в одиночну запис у вигляді мініатюр, при наведенні курсору миші або натискання на які, активується лайтбокс з збільшеною картинкою і елементами управління. Зручно розміщувати такий слайдер в бічних панелях, для подання продуктів або анонсів новин. Відмінне рішення для сайтів з великим об’ємом інформації.

popeye 2.1 Компактный слайдер изображений

Демо

Sequence

Безкоштовний адаптивний слайдер з розширеними CSS3 переходами. Мінімалістичний стиль, 3 теми оформлення, Кожен кадр ковзає в горизонтальному напрямку з’являючись в центрі картинка йде вліво, підпис вправо, мініатюри дублюються в нижньому правому куті. Розбиття на сторінки подання продуктів для перегляду в кожному кадрі. Управління так само включає кнопки назад і вперед. Підтримка всіма сучасними браузерами.

Sequence - бесплатный слайдер изображений

ДемоСкачать

Swipe

Зовсім вже простецький слайдер картинок і по функціоналу та налаштуванням, з налаштувань присутній зміна швидкості зміни слайдів, підключення ручного режиму(активуються кнопки управління), безперервний показ слайдів. Цей слайдер має право бути і мене він залучив лише тим, що він є, для себе нічого особливо цікавого в цій розробці не знайшов, може погано шукав)))

Swipe - слайдер изображений на jQuery

ДемоСкачать

Responsive Image Slider

Гарний такий, адаптивний слайдер зображень від Володимира Кудінова співтовариші. Добротний, якісно пророблений інструмент, що надається з наочними прикладами і докладною інструкцією по створенню, встановлення та використання. Адаптивний дизайн, симпатичні кнопки і стрілочки зеленого кольору, все досить мило і спокійно, без натиску.

Адаптивный слайдер изображений

ДемоСкачать

FractionSlider

Безкоштовний плагін JQuery слайдер з ефектом паралакса для зображень і текст слайдів. Анімація слайдів має кілька значень показу з повним контролем у кожному параметрі часу і анімації. Можливість анімації відразу декількох елементів на слайді. Ви можете встановити різні методи анімації, зникнення слайдів або переходи з певного напряму. Автоматичний показ і ручне управління за допомогою стрілок навігації спливаючих при наведенні на картинку. 10 видів ефектів анімації появи слайдів і багато іншого…

FractionSlider - Бесплатный слайдер изображений на jQuery

ДемоСкачать

Огляд вийшов досить великим, але недостатньо інформативним з-за великої кількості розглянутих продуктів. Всі подробиці та детальні описи функціональних можливостей того чи іншого плагіна, ви зможете дізнатися безпосередньо на сторінках розробників. Мені ж залишається сподіватися, що кому-небудь та й полегшила пошуки того самого потрібного інструменту, для створення барвистих слайдерів картинок на сторінках своїх сайтів.

З повагою, Андрій