Завантажити гарний слайдер. Slider Pro – адаптивний слайдер з мініатюрами. jQuery Плагін «Slider²»

Якщо вам потрібно додати на свій сайт якісний 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;
Розмір всього 3КБ.

Демо | завантажити

Flat-style Polaroid gallery

Галерея у стилі розкиданих на столі документів з гнучким макетом та гарним дизайноммає зацікавити багатьох із вас. Більше підходить для планшетів та великих дисплеїв:

Адаптивний слайдер;
Плоский дизайн;
Випадкова зміна слайдів;
Повний доступ до вихідного коду.

Демо | завантажити

A-Slider

Демо | завантажити

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. Завдяки їм ви можете додати на сайт необхідний обсяг візуального контенту, заощаджуючи при цьому цінне місце.

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

У сьогоднішній статті ми зібрали для вас найкращі галереї зображень та слайдери jQuery.

Для їх встановлення достатньо додати вибрані плагіни до розділу head HTML сторінкиразом з бібліотекою jQuery і налаштувати їх згідно з документацією (всього пара рядків коду).

Вибирайте, який із цих елементів ідеально впишеться у ваш проект.

1. Bootstrap Slider

Bootstrap Slider – безкоштовний, оптимізований під мобільні пристроїслайдер зображень з прокручуванням дотиком та скиданням. Він буде дивовижно виглядати на будь-якому екрані і в будь-якому браузері. Ви можете завантажити у слайдери зображення, відео, текст, мініатюри та кнопки.

2. Product Preview Slider

Product Preview Slider втілює весь потенціал jQuery, він відмінно вбудовується в будь-який інтерфейс. Також вас порадує якість та чистота коду цього плагіна.

3. Expandable Image Gallery

Expandable Image Gallery – приголомшливий плагін, який одним кліком мишки перетворюється на повноекранну галерею. Його можна використовувати для розділу "Про нас" або для перегляду інформації про товари.

4. Fotorama

Fotorama – плагін чуйний галереї jQuery, який працює як для робочого столу, так і для мобільних браузерів. Він пропонує безліч опцій навігації: мініатюри, прокручування, кнопки "вперед" та "назад", автоматичний показ слайд-шоу та маркери.

5. Immersive Slider

Immersive Slider дозволяє створити унікальний досвід перегляду слайдів, схожий на слайдер Google TV. Ви можете змінити фонове зображення, яке буде розмите, щоб зберегти фокус на основних фото.

6. Leastjs

Leastjs – чуйний jQuery плагін, який допоможе вам створити чудову галерею. При наведенні курсору на зображення з'являється текст, при натисканні вікно розгортається на весь екран.

7. Sliding Panels Template

Цей плагін ідеально підійде для портфоліо. Він створить блоки зображень, що розташовуються горизонтально (вертикально на невеликих екранах), до яких буде прив'язаний вибраний контент.

8. Squeezebox Portfolio Template

Squeezebox Portfolio Template пропонує motion-ефекти для портфоліо. Під час наведення курсору на основне зображення (або блок) з'являються прив'язані елементи.

9. Shuffle Images

Shuffle Images – приголомшливий чуйний плагін, який дозволить вам створити галерею з зображеннями, що змінюються при наведенні курсору.

10. Free jQuery Lightbox Plugin

Free jQuery Lightbox Plugin допоможе вам показати одне або кілька зображень на сторінці. Також їх можна буде збільшити та повернути до вихідного розміру.

11. PgwSlider – Responsive slider for jQuery

PgwSlider – мінімальний слайдер зображень. jQuery код важить небагато, тому швидкість завантаження цього плагіна вас приємно здивує.

12. Scattered Polaroids Gallery

Scattered Polaroids Gallery – приголомшливий слайдер, виконаний у плоский дизайн. Його елементи хаотично рухаються при перемиканні зображень, що виглядає приголомшливо.

13. Bouncy Content Filter

Bouncy Content Filter – ідеальне рішення для та портфоліо. Цей плагін дозволяє користувачам швидко переходити з однієї категорії до іншої.

14. Simple jQuery Slider

Simple jQuery Slider виправдовує свою назву. Цей плагін поєднує в собі елементи JavaScript, HTML5 та CSS3. У демо за замовчуванням доступне лише завантаження тексту, але якщо внести кілька змін, можна буде додати візуальний контент.

15. Glide JS

Glide JS – простий, швидкий та чуйний jQuery слайдер. Його легко налаштувати, до того ж, плагін не займе багато місця.

16. Fullscreen drag-slider with parallax

Цей приголомшливий jQuery слайдер із можливістю завантаження зображень та тексту підійде для будь-якого сайту. Він порадує користувачів легким parallax ефектом та повільною появою тексту.

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.

SliderPro - адаптивний jQuery слайдер із підтримкою мініатюр та іншими налаштуваннями, включаючи також і власне API.

Стандартний слайдер підлаштовується під розміри екрана. Масштабуватимуться не лише зображення, а й шари з додатковим контентом.
Підтримка touch-swipe подій для сенсорних екранів. Використання Breakpoints - аналог CSS media queries для зміни налаштувань слайдера на різних розмірах екрану.
Плавна анімація за допомогою css3 transitions, анімація шарів, fade ефект для зміни слайдів.
Слайдер може бути на всю ширину сторінки, на весь екран або всередині контейнера.
Автозміна висоти слайду. Орієнтація превьюшек може бути, як вертикальна, і горизонтальна.
Для зображень підтримується lazy loading, retina, можливість підвантажувати різні зображення під конкретні розміри екранів.
Підтримка відео, інтеграція з lightbox, навігація стрілками, точками, клавіатурою, мініатюрами та багато іншого.

CSS

Підключаємо файл стилів:

HTML

Приклад розмітки для вставки слайдера:

Lorem ipsum dolor sit amet

consectetur adipisicing elit

Підключаємо необхідні скрипти:

Виконуємо ініціалізацію плагіна:

jQuery(document).ready(function($) ( $("#my-slider").sliderPro(); ));

Більш детально про слайдер та його використання можна знайти на гітхабі. Посилання нижче.

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

Іноді слайдер повинен займати третину сторінки сайту. Тут слайдер — карусель використовується з ефектами переходів та адаптивними макетами. Сайти електронної комерції використовують слайдер - карусель для демонстрації безлічі фотографій в окремих публікаціях або сторінках. Код слайдера можна вільно використовувати та змінювати його відповідно до потреб.

Використовуючи JQuery спільно з HTML5 і CSS3, можна зробити ваші сторінки цікавішими, забезпечивши їх унікальними ефектами, і звернути увагу відвідувачів на конкретну область сайту.

Slick – плагін сучасного слайдера – каруселі

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

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

Демо-режим | завантажити

Owl Carousel 2.0 - jQuery - плагін з можливістю використання на сенсорних пристроях

В арсеналі цього плагіна - великий набір функцій, що підходить як для новачків, так і для досвідчених розробників. Це оновлена версія слайдера – каруселі. Його попередник назвався так само.

Слайдер має у своєму складі деякі вбудовані плагіни для покращення загального функціоналу. Анімація, програвання відео, автозапуск слайдера, ліниве завантаження, автоматичне коригування висоти - основні можливості Owl Carousel 2.0.

Підтримка можливості drag and drop увімкнена для зручнішого використання плагіна на мобільних пристроях.
Плагін чудово підійде для відображення великих зображень навіть на маленьких екранах мобільних пристроїв.

приклади | завантажити

jQuery плагін Silver Track

Досить маленький, але багатий по функціоналу jquery плагін, який дозволяє розмістити на сторінці слайдер – карусель, що має невелике ядро і не споживає безліч ресурсів сайту. Плагін може бути використаний для відображення вертикальних та горизонтальних слайдерів, з анімацією та створенням наборів зображень із галереї.

приклади | завантажити

AnoSlide – ультра компактний адаптивний jQuery слайдер

Ультра компактний jQuery слайдер – карусель, функціонал якого набагато більший, ніж у звичайного слайдера. Він включають попередній перегляд одного зображення, відображення декількох зображень у вигляді каруселі і слайдера на основі заголовків.

приклади | завантажити

Owl Carousel – Jquery слайдер – карусель

Owl carousel - слайдер з підтримкою сенсорних екранів і технології drag and drop, що легко вбудовується в HTML-код. Плагін є одним з кращих слайдерів, які дозволяють створювати красиві каруселі без будь-якої спеціально підготовленої розмітки.

приклади | завантажити

3D галерея - карусель

Використовує 3D – переходи, засновані на CSS – стилях та трохи Javascript коду.

приклади | завантажити

3D карусель з використанням TweenMax.js та jQuery

Чудова 3D карусель. Схоже, що це ще бета – версія, тому що я виявив кілька проблем із нею буквально зараз. Якщо ви зацікавлені у тестуванні та створенні ваших власних слайдерів – ця карусель буде великою підмогою.

приклади | завантажити

Карусель із використанням bootstrap

Адаптивний слайдер – карусель з використанням технології bootstrap якраз для нового веб-сайту.

приклади | завантажити

Заснований на Bootstrap – фреймворку слайдер – карусель Moving Box

Найбільш затребуваний на портфоліо та бізнес-сайтах. Подібний тип слайдера каруселі часто зустрічається на сайтах будь-якого типу.

приклади | завантажити

Tiny Circleslider

Це слайдер крихітного розміру готовий працювати на пристроях з будь-якою роздільною здатністю екрану. Слайдер може працювати як у круговому, так і в карусельному режимі. Tiny circle представлений як альтернатива іншим слайдерам такого типу. Є вбудована підтримка операційних систем IOS та Android.

У круговому режимі слайдер має досить цікавий вигляд. Відмінно реалізована підтримка методу drag and drop та система автоматичного прокручування слайдів.

приклади | завантажити

Слайдер контенту Thumbelina

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

приклади | завантажити

Wow – слайдер – карусель

Містить більше 50 ефектів, які можуть допомогти вам у створенні оригінального слайдера для вашого сайту.

приклади | завантажити

Адаптивний jQuery слайдер контенту bxSlider

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

приклади | завантажити

jCarousel

jCarousel - jQuery плагін, який допоможе організувати перегляд ваших зображень. Ви зможете з легкістю створювати користувацькі каруселі зображень з основи, який показаний у прикладі. Слайдер адаптивний та оптимізований для роботи на мобільних платформах.

приклади | завантажити

Scrollbox - jQuery плагін

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

приклади | завантажити

dbpasCarousel

Простий слайдер – карусель. Якщо вам потрібний швидкий плагін - цей підійде на 100%. Постачається тільки з основними функціями, необхідними для слайдера.

приклади | завантажити

Flexisel: адаптивний JQuery плагін слайдера - каруселі

Творці Flexisel надихнулися плагіном старої школи jCarousel, зробивши його копію, орієнтовану на коректну роботу слайдера на мобільних та планшетних пристроях.

Адаптивний макет Flexisel при роботі на мобільних пристроях відрізняється від макета, орієнтованого на розмір вікна браузера. Flexisel відмінно адаптований до роботи на екранах, як з низькою, так і високою роздільною здатністю.

приклади | завантажити

Elastislide – адаптивний слайдер – карусель

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

приклад | завантажити

FlexSlider 2

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

приклад | завантажити

Amazing Carousel

Amazing Carousel – адаптивний слайдер зображень на jQuery. Підтримує безліч систем управління сайтами, такі як WordPress, Drupal та Joomla. Також підтримує Android та IOS та настільні варіанти операційних систем без будь-яких проблем із сумісністю. Вбудовані шаблони amazing carousel дозволяють використовувати слайдер у вертикальному, горизонтальному та круговому режимах.

приклади | завантажити