Адаптивний, або якщо хочете, чутливий веб-дизайн зараз не просто черговий дизайнерський тренд, це вже якийсь стандарт розробки сайтів, що забезпечує універсальність веб-сайтів, гармонійне візуальне сприйняття на екранах різних користувацьких пристроїв. Ще зовсім недавно, при розробці адаптивного шаблону, мені доводилося стикатися з різними труднощами інтеграції тих чи інших слайдерів і галерей зображень, не порушуючи загальний дизайнерський стиль. Зараз все набагато простіше, в мережі існує величезна кількість готових рішень і що особливо радує, більшість з них у вільному доступі, з відкритим вихідним кодом.
З причини різноманіття пропонованих інструментів, я склав невеликий огляд найбільш помітних розробок адаптивних jQuery слайдерів зображень, що з’явилися останнім часом і які розповсюджуються без будь-яких обмежень, тобто абсолютно безкоштовно.
WOW Slider
Адаптивний jQuery слайдер зображень з чудовим набором візуальних ефектів (повороти, вильоти, розмиття, спіралі, жалюзі і т. д…) та безліччю готових шаблонів. За допомогою вбудованого в WOW Slider майстра вставки на сторінку, ви зможете легко і невимушено створювати приголомшливі слайд-шоу за лічені хвилини . На сайті розробника є вся необхідна документація по налаштуванню і використання плагіна Російською мовою, відмінні живі приклади роботи плагіна. Також доступні для скачування окремий плагін WordPress і модуль для Joomla. Впевнений, що багатьом сподобається цей чудовий слайдер, як новачкам, так і набила руку веб-майстром.
HiSlider
HiSlider — HTML5, Jquery слайдер і галерея зображень, абсолютно безкоштовний плагін для особистого користування на сайтах під управлінням популярних систем — WordPress, Joomla, Drupal. З допомогою цього простого, але досить функціонального інструменту, ви зможете без особливих зусиль створювати на сторінках своїх сайтів, дивовижні і яскраві слайд-шоу, ефектні презентації та анонси нових повідомлень. Декілька готових шаблонів і скінів для слайдера, приголомшливі ефекти переходу(зміни) змісту, висновок різного мультимедійного контенту: зображення, відео з YouTube і Vimeo, гнучкі настройки і т. д…
Nivo Slider
Nivo Slider — старий-добрий, добре відомий усім, хто в темі, один з найкрасивіших і простих у використанні слайдер зображень. Плагін JQuery Nivo Slider є безкоштовним для завантаження і подальшого використання, поширюється під ліцензією MIT. Так само є окремий плагін для WordPress, але на жаль вже платний і відвалити за нього доведеться 29$ за одну ліцензію. Краще все ж трохи почаклувати з файлами теми WP і прикрутити вільну jQuery версію плагіна Nivo Slider до свого блогу, благо інфи як це зробити в мережі достатньо.
Що стосується функціоналу, з цим все в повному порядку. Для роботи використовується бібліотека jQuery v1.7+, красиві ефекти переходів, прості і дуже гнучкі налаштування, адаптивний макет, автоматична обрізка зображення і багато іншого.
Multi-Item jQuery Slider
Ідея слайдера була навіяна розробникам, добре відомим всім стилем представлення продукції Apple, де кілька невеликих предметів(картинок) змінюються по кліку на обрану категорію з простеньким ефектом анімації. Codrops надає у ваше розпорядження докладний урок по створенню цього слайдера, повний розклад Html-розмітки, набір правил CSS і виконуваний jQuery плагін, а так само чудовий живий приклад використання слайдера.
Slit Slider
Повноекранний слайдер зображень на JQuery і CSS3 + докладний підручник з інтеграції плагіна на сторінки сайту. Ідея полягає в тому, щоб нарізати відкритий поточний слайд з певним контентом при переході до наступного або попереднього утримання. За допомогою JQuery і CSS-анімації ви зможете створювати унікальні переходи між слайдами. Адаптивний макет слайдера гарантує, що він буде однаково добре виглядати на екранах різних типах пристроїв.
Elastic Content Slider
Слайдер змісту, який автоматом регулюється по ширині і висоті в залежності від розмірів батьківського контейнера, в якому розташований. Досить простий у виконанні і гнучкий у налаштуваннях слайдер працює на JQuery, з навігацією в нижній частині, при зміні розміру екрану в бік зменшення, навігація виводиться у вигляді іконок. Дуже докладна документація(урок по створенню) і живі приклади використання.
3D Stack Slider
Експериментальний варіант слайдера, який демонструє зображення з переходами з площини 3D. Зображення розбиті на дві горизонтальні стопки, з допомогою стрілок навігації здійснюється зміна і перехід кожної наступної картинки в стан перегляду. Загалом нічого особливого, але сама ідея і техніка виконання досить цікаві.
Повноекранний слайдер зображень
Дуже простий, 100% адаптивний і повноекранний jQuery слайдер зображень. Робота слайдера заснована на CSS переходах(властивість transition) в зв’язці з магією jQuery. Значення max-width за умовчанням встановлено на 100%, по-цьому розмір картинок буде змінюватися в залежності від змін розмірів екрану. Ні яких особливих анімаційних ефектів і вишукувань в оформленні, все просто, і заточене на безперебійну роботу.
Unislider
Відмінний jQuery слайдер картинок з серії широкоформатних слайд-шоу в шапці сайту. Дуже легкий у всіх відносинах(архів зkb), без фантастичних ефектів і зайвої розмітки. Ви можете використовувати практично будь-які елементи html в слайдах, розширюючи його можливості(оформлення) за допомогою CSS. Повний контроль всіх налаштувань і функцій. Вся документація у відкритому доступі на GitHub.
Minimal Slides
Назва говорить сама за себе, це мабуть один з найбільш легких і мінімалістичний jQuery слайдерів зображень, які мені зустрічалися(плагін в 1kb). ResponsiveSlides.js -крихітний плагін JQuery, який створює слайд-шоу, використовуючи елементи всередині контейнера. Працює з широким діапазоном браузерів, включаючи всі версії IE — знаменитого гальма прогресу, від IE6 і вище. В роботі використовуються переходи CSS3 в зв’язці з javascript, для надійності. Проста розмітка з використанням неупорядкованого списку, настроювання переходів і часових інтервалів, автоматичне і ручне керування перемиканням слайдів, а так само підтримка відразу декількох слайд-шоу. Ось такий жвавий «малюк».
Camera
Camera — безкоштовний JQuery плагін для організації слайд-шоу на сторінках сайтів, легкий слайдер з безліччю ефектів переходів, з 100% адаптивним макетом, і дуже простими налаштуваннями. Чудово впишеться на екрани будь-яких пристроїв(монітори ПК, планшети, смартфони та мобільні телефони). Можливість демонстрації вбудованого відео. Автоматична зміна слайдів і ручне управління за допомогою кнопок і блоку мініатюр. Практично повноцінна галерея зображень в компактному виконанні.
bxSlider jQuery
Ще один, досить простий адаптивний слайдер на jQuery. У слайдах можна розміщувати будь-який контент, відео, зображення, текст та інші елементи. Розширена підтримка сенсорних екранів. Використання CSS-анімації переходів. Велика кількість різних варіацій подання слайд-шоу і компактних галерей зображень. Автоматичне і ручне управління. Перемикання слайдів за допомогою кнопок і за допомогою вибору мініатюр. Невеликий розмір вихідного файлу, дуже простий в налаштуваннях і реалізації.
FlexSlider 2
FlexSlider 2 — Оновлена версія однойменного слайдера, з покращеною швидкістю реагування, минификацией скрипта, і зведенням до мінімуму перекомпонування/перемальовування. Плагін включає в себе базовий слайдер, контроль керування слайдами за допомогою мініатюр, вбудованих стрілок вліво-вправо і нижній панелі навігації у вигляді кнопок. Можливість виводу в слайдах відео(vimeo), гнучкі настройки параметрів(переходи, оформлення, тимчасової інтервал), повністю адаптивний макет.
Galleria
Добре відомий і досить популярний, адаптивний плагін jQuery для створення високоякісних галерей і слайдерів зображень. Інтерфейс слайдера, завдяки його панелі управління візуально нагадує звичний відеоплеєр, до складу плагіна входить кілька різних тем оформлення. Підтримка вбудованого відео і зображень з популярних сервісів: Flickr, Vimeo, YouTube та інших. Докладна документація по налаштуванню і використання.
Blueberry
Простий без наворотів безкоштовний JQuery слайдер зображень, написаний спеціально для адаптивного веб-дизайну. Blueberry є експериментальним JQuery плагіном з відкритим вихідним кодом. Мінімалістичний дизайн, ніяких ефектів, тільки плавно спливаючі картинки змінюють один одного через певний проміжок часу. Все дуже просто, поставив, підключив і вперед…
jQuery popeye 2.1
Дуже компактний jQuery слайдер зображень з елементами Lightbox. Завдяки своїм гнучким розмірами, дуже просто вбудовується в будь-який контейнер, в одиночну запис у вигляді мініатюр, при наведенні курсору миші або натискання на які, активується лайтбокс з збільшеною картинкою і елементами управління. Зручно розміщувати такий слайдер в бічних панелях, для подання продуктів або анонсів новин. Відмінне рішення для сайтів з великим об’ємом інформації.
Sequence
Безкоштовний адаптивний слайдер з розширеними CSS3 переходами. Мінімалістичний стиль, 3 теми оформлення, Кожен кадр ковзає в горизонтальному напрямку з’являючись в центрі картинка йде вліво, підпис вправо, мініатюри дублюються в нижньому правому куті. Розбиття на сторінки подання продуктів для перегляду в кожному кадрі. Управління так само включає кнопки назад і вперед. Підтримка всіма сучасними браузерами.
Swipe
Зовсім вже простецький слайдер картинок і по функціоналу та налаштуванням, з налаштувань присутній зміна швидкості зміни слайдів, підключення ручного режиму(активуються кнопки управління), безперервний показ слайдів. Цей слайдер має право бути і мене він залучив лише тим, що він є, для себе нічого особливо цікавого в цій розробці не знайшов, може погано шукав)))
Responsive Image Slider
Гарний такий, адаптивний слайдер зображень від Володимира Кудінова співтовариші. Добротний, якісно пророблений інструмент, що надається з наочними прикладами і докладною інструкцією по створенню, встановлення та використання. Адаптивний дизайн, симпатичні кнопки і стрілочки зеленого кольору, все досить мило і спокійно, без натиску.
FractionSlider
Безкоштовний плагін JQuery слайдер з ефектом паралакса для зображень і текст слайдів. Анімація слайдів має кілька значень показу з повним контролем у кожному параметрі часу і анімації. Можливість анімації відразу декількох елементів на слайді. Ви можете встановити різні методи анімації, зникнення слайдів або переходи з певного напряму. Автоматичний показ і ручне управління за допомогою стрілок навігації спливаючих при наведенні на картинку. 10 видів ефектів анімації появи слайдів і багато іншого…
Огляд вийшов досить великим, але недостатньо інформативним з-за великої кількості розглянутих продуктів. Всі подробиці та детальні описи функціональних можливостей того чи іншого плагіна, ви зможете дізнатися безпосередньо на сторінках розробників. Мені ж залишається сподіватися, що кому-небудь та й полегшила пошуки того самого потрібного інструменту, для створення барвистих слайдерів картинок на сторінках своїх сайтів.
З повагою, Андрій
