Добірка адаптивних слайдерів. Приклади безкоштовних JQuery слайдерів для зображень Jquery слайдер на всю сторінку
Галерея зображень у вигляді слайдера . Коли я починав готувати матеріал для цієї добірки, думав, що якісного матеріалу буде просто дві нескінченності, оскільки тема галерей зображеньстара як світ і дуже затребувана. Моєму подиву не було межі, коли з кожною знову відкритою демкою надійно знайти щось пристойне танула на очах. У зв'язку з цим добірка вийшла не велика, але, на мою думку, з досить цікавими екземплярами. Серед них є як адаптивні галереї зображеньтак і галереї.
До речі, у попередньому топіку я робив добірку плагінів галерей для WordPress, так що якщо у вас є сайт на WordPress думаю вона вам буде вкрай цікава.
1. Unite Gallery
Безкоштовна, адаптивна фото та відео галереяна основі бібліотеки JQuery. При розробці акцент робився на простоту використання та налаштування. Постачається з досить великою кількістю якісних тем оформлення, а також, що важливо, є можливість писати власні теми оформлення.2. Responsive Image Gallery with Thumbnail Carousel
Адаптивна галерея зображеньз функцією відключення каруселі превьюшек. Підлаштовується під розмір вашого екрану, є прелоадер підвантаження зображень.
4. Full Page Image Gallery with jQuery
Ще одна повноекранна галерея зображень. Її особливістю та "родзинкою" є переміщення збільшеного повноекранного зображення в залежності від положення мишки.Бар мініатюр у нижній частині екрана прокручується автоматично, коли користувач переміщає мишу.
5. Slider Gallery With jQuery
Ідеально підійде для розбиття галерей на альбоми. При виборі альбому будуть показані мініатюри слайдером зображень.
6. Galleria
Це добре спроектована адаптивна галерея зображень, здатна показувати фото та відео галереї з Flickr, Picasa, YouTube та ін. мобільних пристроївта можливість працювати у повноекранному режимі. Є можливість відображення підписів. Є платніЦе адаптивний слайдер тач, написаний на jQuery. У движку даного плагіна використовуються CSS3 анімації, але в той же час передбачені фолбеки для більш старих версій браузерів. Glide.js простий та легковажний.
Використання
1. Підключаємо jQuery
Єдина залежність плагіна - це jQuery, який ми повинні підключити насамперед:
2. Підключаємо Glide.js
3. Додаємо html
Підключимо базові стилі.
Накатаємо html структуруслайдер.
4. Ініціалізація
Запускаємо слайдер із налаштуваннями за замовчуванням.
… або налаштовуємо його під себе
Налаштування
Список доступних параметрів:
| Параметр | Значення за замовчуванням | Тип | Опис |
| autoplay | 4000 | int/bool | Автопрокручування (false для відключення) |
| hoverpause | true | bool | Призупиняти автопрокручування при наведенні миші на слайдер |
| animationTime | 500 | int | !!! Ця опція працює, якщо браузер НЕ підтримує css3. Якщо CSS3 підтримується браузером, то даний параметрпотрібно змінити в.css файл!!! |
| arrows | true | bool/string | Показати/приховати/прикріпити стрілки. True для відображення стрілок у контейнері слайдера. False для приховання. Також можете вказати назву класу (приклад: ".class-name") для прикріплення особливого HTML коду |
| arrowsWrapperClass | slider-arrows | string | Клас, який присвоюється контейнеру зі стрілками |
| arrowMainClass | slider-arrow | string | Основний клас для всіх стрілок |
| arrowRightClass | slider-arrow--right | string | Клас для правої стрілки |
| arrowLeftClass | slider-arrow - left | string | Клас для лівої стрілки |
| arrowRightText | next | string | Текст для правої стрілки |
| arrowLeftText | prev | string | Текст для лівої стрілки |
| nav | true | bool/string | Показати/приховати/прикріпити навігацію по слайду. True для відображення. False для приховання |
| navCenter | true | bool | Навігація за центом |
| navClass | slider-nav | string | Клас для навігаційного контейнера |
| navItemClass | slider-nav__item | string | Клас для елемента навігації |
| navCurrentItemClass | slider-nav__item--current | string | Клас для поточного елемента навігації |
| keyboard | true | bool | Прокручувати слайд під час натискання кнопок ліворуч/праворуч |
| touchDistance | 60 | int/bool | Підтримка дотику (тач). False для вимкнення цієї можливості. |
| beforeInit | function()() | function | Колбек, який запуститься перед ініціалізацією плагіна |
| afterInit | function()() | function | Колбек, який запуститься за ініціалізацією плагіна |
| допереходу | function()() | function | Колбек, який запуститься перед прокручуванням слайдера |
| afterTransition | function()() | function | Колбек, який запуститься після прокручування слайдера |
API
Для використання API запишіть glide в змінну.
Var glide = $(".slider").glide().data("api_glide");
Тепер вам доступні методи API.
Glide.jump(3, console.log("Wooo!"));
- .current() - Повернення номера поточного сайду
- .play() - Почати автопрокручування
- .pause() - Зупинити автопрокручування
- .next(callback) - Прогорнути слайдер вперед
- .prev(callback) - Прогорнути слайдер назад
- .jump(distance, callback) - Перейти на певний слайд
- .nav(target) - Прикріпити навігацію до певного елементу (наприклад: "body", ".class", "#id")
- .arrows(target) - Прикріпити стрілки до певного елементу (наприклад: "body", ".class", "#id")
1. Чудове jQuery слайд-шоу
Велике ефектне слайд-шоуз використанням jQuery технологій.
2. jQuery плагін "Scale Carousel"
Масштабоване слайд-шоу за допомогою jQuery. Ви зможете встановити розміри для слайд-шоу, які вам найбільше підходять.
3. jQuery плагін "slideJS"
Слайдер зображень із текстовим описом.
4. Плагін "JSliderNews"
5. CSS3 jQuery слайдер
Під час наведення курсору на стрілки навігації з'являється кругла мініатюра наступного слайда.
6. Симпатичний jQuery слайдер «Presentation Cycle»
jQuery слайдер з індикатором завантаження зображень. Передбачено автоматичну зміну слайдів.
7. jQuery плагін «Parallax Slider»
Слайдер з об'ємним ефектом фону. Родзинка цього слайдера рух фону, який складається з декількох шарів, кожен з яких прокручується з різною швидкістю. У результаті виходить імітація об'ємного ефекту. Виглядає дуже красиво, ви можете самі переконатися в цьому. Більш плавно ефект відображається в таких браузерах як Opera, Google Chrome, IE.
8. Свіжий, легкий jQuery слайдер "bxSlider 3.0"
На демонстраційній сторінці у розділі «examples» ви зможете знайти посилання на все можливі варіантивикористання цього плагіна.
9. jQuery слайдер зображень, плагін "slideJS"
Стильний jQuery слайдер, безумовно, зможе прикрасити ваш проект.
10. jQuery плагін слайд-шоу «Easy Slides» v1.1
Простий у використання JQueryплагін для створення слайд-шоу.
11. Плагін «jQuery Slidy»
Легкий jQuery плагін у різному виконанні. Передбачено автоматичну зміну слайдів.
12. jQuery CSS галерея з автоматичною зміною слайдів
Якщо відвідувач протягом певного часу не натисне на стрілки "Вперед" або "Назад", то галерея почне прокручуватися автоматично.
13. jQuery слайдер "Nivo Slider"
Дуже професійний якісний легкий плагін із валідним кодом. Передбачено багато різних ефектів зміни слайдів.
14. jQuery слайдер "MobilySlider"
Свіжий слайдер. jQuery слайдер з різними ефектами зміни зображень.
15. jQuery Плагін «Slider²»
Легкий слайдер із автоматичною зміною слайдів.
16. Свіжий javascript слайдер
Слайдер із автоматичною зміною зображень.
Плагін для реалізації слайд-шоу із автоматичною зміною слайдів. Можна управляти показом за допомогою мініатюр зображень.
jQuery CSS слайдерзображень із використанням плагіна NivoSlider .
19. jQuery слайдер «jShowOff»
Плагін для ротації вмісту. Три варіанти використання: без навігації (з автоматичною зміною у форматі слайд-шоу), навігацією у вигляді кнопок, навігацією у вигляді мініатюр зображень.
20. Плагін "Shutter Effect Portfolio"
Свіжий jQuery плагін для оформлення портфоліо фотографа. У галереї реалізовано цікавий ефект зміни зображень. Фотографії змінюють одна одну з ефектом, схожим на роботу затвора об'єктива.
21. Легкий javascript CSS слайдер "TinySlider 2"
Реалізація слайдера зображень за допомогою javascript і CSS.
22. Неймовірний слайдер «Tinycircleslider»
Стильний круглий слайдер. Перехід між зображеннями здійснюється за допомогою перетягування по колу повзунка у вигляді червоного кола. Відмінно впишеться у ваш сайт, якщо ви використовуєте в дизайні круглі елементи.
23. Слайдер зображень на jQuery
Легкий слайдер "Slider Kit". Слайдер представлений у різному виконанні: вертикальний та горизонтальний. Також реалізовані різні види навігації між зображеннями: за допомогою кнопок «Вперед» та «Назад», за допомогою колеса миші, за допомогою кліку миші по слайду.
24. Галерея з мініатюрами "Slider Kit"
Галерея "Slider Kit". Прокручування мініатюр здійснюється як у вертикальному, так і горизонтальному напрямку. Перехід між зображеннями здійснюється за допомогою: колеса миші, натискання миші або наведення курсору на мініатюру.
25. jQuery слайдер вмісту "Slider Kit"
Вертикальний та горизонтальний слайдер контенту на jQuery.
26. jQuery слайд-шоу "Slider Kit"
Слайд-шоу з автоматичною зміною слайдів.
27. Легкий професійний javascript CSS3 слайдер
Акуратний слайдер на jQuery та CSS3, створений у 2011 році.
jQuery слайд-шоу з мініатюрами.
29. Просте jQuery слайд-шоу
Слайд-шоу з навігаційними кнопками.
30. Неймовірне слайд-шоу jQuery «Skitter»
jQuery плагін "Skitter" для створення приголомшливого слайд-шоу. Плагін підтримує 22 (!) види різних анімаційних ефектів при зміні зображень. Може працювати з двома варіантами навігації за слайдами: за допомогою номерів слайдів та за допомогою мініатюр. Обов'язково подивіться демонстрацію, дуже якісна знахідка. Технології, що використовуються: CSS, HTML, jQuery, PHP.
31. Слайд-шоу "Awkward"
Функціональне показ слайдів. У вигляді слайдів можуть виступати: прості зображення, зображення з підписами, зображення з підказками, відео-ролики. Для навігації можна використовувати стрілки, посилання на номери слайдів та клавіші праворуч/ліворуч на клавіатурі. Слайд-шоу виконано у кількох варіантах: з мініатюрами та без них. Для перегляду всіх варіантів пройдіть посилання Demo #1 - Demo #6 розташованим зверху на демонстраційній сторінці.
Дуже оригінальне оформлення слайдера зображень, що нагадує віяло. Анімована зміна слайдів. Навігація між зображеннями здійснюється за допомогою стрілок. Передбачено також автоматичну зміну, яку можна вмикати та вимикати за допомогою кнопки Play/Pause, розташованої зверху.
Анімований jQuery слайдер. Фонові зображенняавтоматично масштабуються при зміні розмірів вікна браузера. Для кожного зображення випливає блок із описом.
34. "Flux Slider" слайдер на jQuery та CSS3
Новий jQuery слайдер. Декілька класних анімованих ефектів при зміні слайдів.
35. jQuery плагін «jSwitch»
Анімована галерея jQuery.
Легке слайд-шоу на jQuery з автоматичною зміною слайдів.
37. Нова версія плагіна "SlideDeck 1.2.2"
Професійний слайдер контенту. Можливі варіанти автоматичної зміни слайдо, а також варіант з використанням колеса миші для переходу між слайдами.
38. jQuery слайдер «Sudo Slider»
Легкий сладер зображення на jQuery. Дуже багато варіантів реалізації: горизонтальна та вертикальна зміна зображень, з посиланнями на номер слайда і без них, з підписами зображень та без, різні ефекти зміни зображень. Є функція автоматичної змінислайдів. Посилання на приклади реалізації можна знайти на демонстраційній сторінці .
39. jQuery CSS3 слайд-шоу
Слайд-шоу із мініатюрами підтримує режим автоматичної зміни слайдів.
40. jQuery слайдер «Flux Slider»
Слайдер з безліччю ефектів зміни зображень.
41. Простий jQuery слайдер
Стильний слайдер зображень на jQuery.
Час не стоїть на місці, а з ним і прогрес. Це торкнулося і просторів інтернету. Вже можна побачити як змінюється зовнішній виглядсайтів, особливо великою популярністю користується адаптивний дизайн. І у зв'язку з цим з'явилося чимало нових адаптивних jqueryслайдерів, галереї, каруселі або подібні плагіни.
1. Responsive Horizontal Posts Slider
Адаптивна горизонтальна карусель з детальною інструкцієюіз встановлення. Виконана вона у простому стилі, але ви можете її стилізувати під себе.
2. Слайдер на Glide.js
Цей слайдер підходить для будь-якого сайту. Тут використовується Glide.js із відкритим кодом. Кольори слайдера можна легко змінити.
3. Tilted Content Slideshow
Адаптивний слайдер із контентом. Родзинкою цього слайдера є 3d ефект зображень, а також різні анімації появи у випадковому порядку.
4. Слайдер з використанням HTML5 canvas
Дуже красивий та вражаючий слайдер з інтерактивними частинками. Виконаний він за допомогою HTML5 canvas,
5. Слайдер «Морфінг зображень»
Слайдер з ефектом морфінгу (плавна трансформація з одного об'єкта до іншого). У цьому прикладі слайдер добре підійде для портфоліо веб-розробника або веб-студії у вигляді портфоліо.
6. Круговий слайдер
Слайдер у вигляді кола із ефектом перевороту зображення.
7. Слайдер із розмитим фоном
Адаптивний слайдер з перемиканням та розмиттям заднього фону.
8. Адаптивний фешн слайдер
Простий, легкий та адаптивний слайдер для сайту.
9. Slicebox - jQuery 3D image slider(ОНОВЛЕНИЙ)
Оновлена версія Slicebox slider із виправленнями та новими можливостями.
10.Free Animated Responsive Image Grid
Плагін JQuery для створення гнучкої сітки зображення, який перемикатиме знімки, використовуючи різні анімації та таймінги. Це може добре виглядати як фон або декоративний елемент на сайті, оскільки ми можемо налаштувати вибіркову появу нових зображень та їх переходів. Плагін виконаний у кількох варіантах.
11. Flexslider
Універсальний безкоштовний плагін для вашого сайту. Цей плагін виконаний у кількох варіантах слайдера та каруселях.
12. Фоторама
Fotorama- це універсальний плагін. У нього багато налаштувань, все працює швидко і легко, є можливість перегляду слайдів на весь екран. Слайдер можна використовувати як у фіксованому розмірі так і адаптивному, з мініатюрами та без, з круговою прокруткою та без та ще багато чого.
P.S.Ставив слайдер кілька разів і вважаю що він один із найкращих
13. Безкоштовна та адаптивна 3D галерея-слайдер з мініатюрами.
Експериментальна галерея-слайдер 3DPanelLayoutз сіткою та цікавими ефектамианімації.
14. Слайдер на CSS3
Адаптивний слайдер виконаний за допомогою css3 з плавною появоюконтенту та легкою анімацією.
15. WOW Slider
WOW Slider- це слайдер зображень із приголомшливими візуальними ефектами.
17. Elastic
Еластичний слайдер з повною адаптивністю та мініатюрами слайдів.
18. Slit
Це повноекранний адаптивний слайдер із використанням анімації css3. Виконано слайдер у двох варіантах. анімація зроблена досить незвичайно і красиво.
19. Адаптивна фотогалерея plus
Простий безкоштовний слайдер-галерея із підвантаженням зображень.
20. Адаптивний слайдер для WordPress
Адаптивний слайдер для WP.
21. Parallax Content Slider
Слайдер з ефектом паралаксу та контролем кожного елемента за допомогою CSS3.
22. Слайдер із прив'язкою музики
Слайдер із використанням відкритого вихідного коду JPlayer. Цей слайдер нагадує презентацію з музикою.
23. Слайдер із jmpress.js
Адаптивний слайдер ґрунтується на jmpress.js і тому дозволить використовувати деякі цікаві 3D ефекти до слайдів.
24. Fast Hover Slideshow
Слайд шоу з швидким перемиканнямслайдів. Слайди перемикаються під час наведення курсору.
25. Image Accordion with CSS3
Акордеон зображень за допомогою css3.
26. A Touch Optimized Gallery Plugin
Це адаптивна галерея, яка оптимізована для тач-пристроїв.
27. 3D Галерея
3D Wall Gallery- створена для браузера Safari, де буде видно 3D-ефект. Якщо дивитися на іншому браузері, то функціональність буде в порядку, але не буде видно 3D ефект.
28. Слайдер із пагінацією
Адаптивний слайдер із нумерацією сторінок за допомогою повзунка JQuery UI. ідея полягає в тому, щоб використовувати просту концепцію навігації. Є можливість перемотування всіх зображень або перемикання послайдів.
29.Image Montage with jQuery
Автоматичне розташування зображень залежить від ширини екрана. Дуже корисна річ при розробці сайту портфоліо.
30. 3D Gallery
Прості 3D круговий слайдер на css3 і jQuery.
31. Повноекранний режимз 3D ефектом на css3 та jQuery
Слайдер із можливістю повно-екранного перегляду зображень із гарним переходом.