Привіт, дорогі читачі блогу. Сьогодні представляю Вам корисну добірку безкоштовних JQuery слайдеров з прикладами. Якщо Ви все таки надумали поставити слайдер зображень на свій ресурс, ця добірка Вам дуже стане в нагоді, і, повірте, вам є з чого вибрати. Тим більше все слайдери з прикладами, і кожен з них Ви зможете спробувати у дії. В загалом не буду відволікати, вибирайте :-)
Простий JQuery слайдер зображень
Найпростіший і не великий слайдер мініатюр на Вашому сайті.
Слайдер зі слайдами на JQuery
Дуже простий і цікавий слайдер зі слайдами, який підійде практично для будь-якого дизайну.
Гарний слайдер для сайту
Великий і дуже красивий слайдер зображень, з цікавим перегортанням тексту.
Звичайний JQuery слайдер
Найпростіший і простий слайдер на Ваш ресурс
Великий слайдер з описом
Ефектний слайдер повз якого неможливо пройти.
JQuery слайдер картинок і описом
Стривай і стильний слайдер тексту з зображеннями і з гарним ефектом перегортання.
Скролінг зображень з підказками
Цікавий скролінг зображень, який безперервно і плавно прокручується. За замовчуванням стоять зображення різних фруктів, які можна змінити на свої.
JQuery слайдер з великими стрілками
Цікавий слайдер з великими рожевими стрілками, які змінюють розмір за рахунок збільшення зображення.
Ви намагаєтеся показати користувачам стільки, скільки максимально ви можете, але ви хочете донести цю інформацію організованим і чистим способом. Тому ми створили для вас готовий до використання слайдер jQuery з деякими вбудованими опціями, такими як фон відео / зображень і різні вирівнювання тексту. У спробі збільшити взаємодію з користувачем ми замінили «навігаційні стрілки» на кнопки. Різниця полягає в наступному: кнопки мають заголовок, підказку про те, який контент очікувати. Стрілки просто говорять користувачам «ви можете перемикати слайд».
створення структури
HTML структурований в 2 основних елементи: невпорядкований список ul.cd-hero-slider, що містить слайди, і div.cd-slider-nav, що містить навігацію повзунка і маркер span.cd (використовуваний для створення Маркер обраного елемента в навігації).
Додавання стилю
Структура слайдера досить проста: все слайди переведені вправо, поза вікном перегляду translateX (100%); Обраний клас додається в видимий слайд, щоб перемістити його назад в вікно перегляду translateX (0), а класс.move-left використовується для перекладу слайда вліво translateX (-100%).
Для досягнення гладкою анімації ми використовували переходи CSS3, що застосовуються до елементу.selected і.is-moving: при виборі нового слайда класс.is-moving присвоюється слайду, який рухається за межами області перегляду, в той час як обраний Клас присвоюється відповідно до заданої слайду.
Cd-hero-slider li (position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX (100%);) .cd-hero-slider li.selected (/ * this is the visible slide * / position: relative; transform: translateX (0);) .cd-hero-slider li.move-left (/ * slide hidden on the left * / transform: translateX (-100%);) .cd-hero-slider li.is-moving, .cd-hero-slider li.selected (/ * the is-moving class is assigned to the slide which is moving outside the viewport * / transition: transform 0.5s;)
Про одиночній анімації слайдів: на великих пристроях (ширина видового екрану більш 768 пікселів) ми вирішили оживити ефект входу, оживляючи окремі слайдові елементи.cd-half-width і.cd-full-width, змінюючи їх непрозорість і Перетворити властивості.
Класси.from-left і.from-right використовуються для визначення того, чи входить обраний слайд в область перегляду ліворуч або праворуч, щоб запускати іншу анімацію відповідно до напряму входу. Щоб цей ефект працював правильно, ми використовували інше значення затримки анімації для кожного анімованого елементу.
Для елементов.cd-half-width, наприклад:
@media only screen and (min-width: 768px) (
.cd-hero-slider .cd-half-width (
opacity: 0;
transform: translateX (40px);
}
.cd-hero-slider .move-left .cd-half-width (
transform: translateX (-40px);
}
.cd-hero-slider .selected .cd-half-width (
/ * This is the visible slide * /
opacity: 1;
transform: translateX (0);
}
.cd-hero-slider .is-moving .cd-half-width (
/ * This is the slide moving outside the viewport
wait for the end of the transition on the
transition: opacity 0s 0.5s, transform 0s 0.5s;
}
.cd-hero-slider li.selected.from-left .cd-half-width: nth-of-type (2),
.cd-hero-slider li.selected.from-right .cd-half-width: first-of-type (
transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
}
.cd-hero-slider li.selected.from-left .cd-half-width: first-of-type,
.cd-hero-slider li.selected.from-right .cd-half-width: nth-of-type (2) (
/ * This is the selected slide - different animation if it "s entering from left or right * /
transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
}
}
Обробка подій
Відео, яке використовується в якості фону для одного зі слайдів, що не вставлено безпосередньо в HTML, а завантажується, тільки якщо ширина пристрою більше 768 пікселів; Таким чином, відеоролик збережено не буде завантажено на мобільні пристрої. Відео дані обраного слайда використовуються для вилучення відеоролика. Ви можете зробити те ж саме для елементів всередині контейнера.cd-img (який прихований на мобільних пристроях).
Крім того, ми використовували jQuery для реалізації функціональності слайд-шоу: коли користувач клацає один з елементів списку вкладкі.cd-slider-nav, ми виявляємо позицію обраного елемента (використовуючи функцію index ()) і оновлюємо слайдер (Використовуючи функції nextSlide () або prevSlide () відповідно до цієї позицією) і положення span.cd-marker.
$ ( ". Cd-slider-nav li"). On ( "click", function (event) (event.preventDefault (); var selectedItem \u003d $ (this); if (! SelectedItem.hasClass ( "selected")) (// if it "s not already selected var selectedPosition \u003d selectedItem.index (), activePosition \u003d $ (". cd-hero-slider .selected "). index (); if (activePosition
Примітка!
Якщо ви хочете анімувати слайдер автоматично, додайте класс.autoplay в елемент ul.cd-hero-slider.
Це адаптивний тач слайдер, написаний на 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 | Колбек, який запуститься після инициализацией плагіна |
| beforeTransition | function () () | function | Колбек, який запуститься перед прокруткою слайдера |
| afterTransition | function () () | function | Колбек, який запуститься після прокрутки слайдера |
API
Для використання API, запишіть glide в змінну.
Var glide \u003d $ ( ". 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")
Від автора: незважаючи на чутки про нібито «смерті» видимої без прокрутки частини веб-сторінок, потреба в хорошому слайдері нікуди не зникла. Давайте будемо чесними, хоч на секунду - слайдери це весело. До того ж, ніщо інше на відміну від рухається контенту не викликає у користувача «вау» ефект. Все слайдери представляють собою набір з декількох слайдів, що змінюють один одного і вкрай важливо, щоб код слайдера був якомога легше. Саме в таких випадках нам допоможе jQuery.
Погляньте на 20 jQuery слайдеров з сайту Envato Market, і ви зрозумієте, що бувають слайдери, які більше ніж просто блок з плавно змінюються зображеннями.
1. RoyalSlider - Тачскрін галерея зображень на jQuery
Зараз адаптивний слайдер, до того ж і доброзичливий до сенсорних екранів, значить набагато більше, ніж раніше. RoyalSlider поєднує в собі обидві функції: адаптивність і роботу з сенсорними екранами. Хороший вибір, так як галерея написана на HTML5 та CSS3.
Кілька цікавих функцій:
Як створити сайт самому?
SEO оптимізація
висока настраиваемость
Більше 10 початкових шаблонів
Є фолбек для CSS3 переходів
На мій погляд, найкрутіша функція це «модульна архітектура скрипта», що дозволяє відключати з основного JS файлу непотрібні речі, тим самим зменшуючи вагу. RoyalSlider, тачскрін галерея зображень на JQuery - надійний JavaScript слайдер, який повинен поповнити набір інструментів будь-якого розробника.
2. Slider Revolution адаптивний jQuery плагін
Не так-то просто зробити щось «революційне» зі слайдером. Коли мова заходить про слайдерах, в них можна додати стільки багато функцій. Однак Slider Revolution це дійсно хороша спроба. Серед JQuery слайдеров даний екземпляр відповідає всім вашим можливим вимогам.
Список можливостей слайдера настільки великий, тому я перерахую тільки най-най:
Паралакс ефект і призначена для користувача анімація
Необмежена кількість шарів і слайдів з посиланнями
ready to use, глибоко настроюються стилі
і багато іншого
Можливість додати зображення, вбудований відеоплеєр і посилання з соціальних мереж робить Slider Revolution одним з найбільш гнучких і настроюються варіантів в мережі.
3. LayerSlider адаптивний jQuery плагін слайдер
За назвою «LayerSlider адаптивний jQuery плагін слайдер» можна по-справжньому оцінити цей слайдер.
200+ 2D і 3D переходи між слайдами закрутять голову будь-кому.
Парочка примітних функцій:
13 скінів і 3 типу меню
Можливість розмістити фіксоване зображення поверх слайдера
І JQuery фолбек
І багато іншого
Як і з попереднім слайдером, можна додати майже будь-який контент, навіть HTML5 резидентний мультимедіа контент. LayerSlider оживляє слайдери, до того ж він дуже гарний.
4. jQuery Banner Rotator / Slideshow
jQuery Banner Rotator / Slideshow - досить простий слайдер, що не приносить в жертву основний функціонал.
можливості:
Зринаючі підказки, текстові вставки і т.д.
Прев'ю і різні варіанти перегляду компонентів
Таймер з затримкою на один слайдер або на все
Множинні переходи всіх слайдів або різні переходи для кожного окремо
jQuery Banner Rotator / Slideshow в порівнянні з іншими JQuery слайдерами володіє тільки базовими можливостями, але про нього не варто забувати.
5. All In One Slider - Адаптивний jQuery слайдер плагін
Будь-слайдер, що з'являється в мережі, має свій унікальний баченням і вирішує будь-які проблеми в своїй області. Але тільки не цей. All In One Slider можна назвати «все включено».
Я думаю, у більшості веб-розробників і дизайнерів є перевірене рішення, але вони завжди шукають щось нове. А це «щось нове» включає в себе:
ротатор банерів
Банер з превью
Банер з плейлистом
слайдер контенту
карусель
Всі типи слайдеров підтримують більшу частину функціоналу, якщо не весь, який необхідний JQuery слайдерам. Чи стане All In One Slider вашим «все включено»?
6. UnoSlider - Адаптивний тачскрін слайдер
Якщо ваш слайдер не адаптивні і не підтримує сенсорні екрани, то у вас неправильний слайдер. UnoSlider - правильний.
Цей слайдер знайшов своє місце під сонцем між простотою і багатим набором функцій. функції:
підтримка тим
12 готових тим
40 переходів
Підтримка IE6 +
Всі функції з ухилом в дизайн і стиль, що робить UnoSlider відмінним контентним слайдером з можливістю додавання тем.
7. Master Slider - jQuery тачскрін слайдер
Шукайте «один JQuery слайдер, щоб управляти всіма»? Спробуйте Master Slider - JQuery тачскрін слайдер під різні розміри екрану ...
Коли справа стосується хорошого дизайну, цей екземпляр один з кращих:
Більше 25 шаблонів
Переходи з апаратним прискоренням
Підтримка торкань і свайпов
І багато іншого
Інтерактивні переходи, анімовані шари і хотспоти безумовно привернуть вашу увагу. Master Slider - витвір мистецтва.
8. TouchCarousel - jQuery контент скроллер і слайдер
TouchCarousel привертає безкоштовної підтримкою і оновленнями. Однак це не всі функції цього легкого JQuery слайдера типу карусель.
Якщо в назві присутнє слово «touch», можна здогадатися, що слайдер повністю адаптивен і підтримує торкання. Інші функції:
SEO оптимізація
розумне Автовідтворення
CSS3 переходи з апаратним прискоренням
Настроюється UI і 4 скіна для фотошопа
TouchCarousel через свою унікальною фізичної прокрутки слайдів це абсолютно новий рівень відчуттів на мобільних пристроях.
9. Advanced Slider - jQuery XML слайдер
jQuery слайдери можна використовувати не тільки на сайтах. Також вони можуть стати в нагоді в веб-додатках. Advanced Slider дозволяє це зробити.
З HTML або XML розміткою цей просунутий слайдер надає незабутнє враження:
Анімовані шари і розумне відео
100+ переходів і 150+ настроюються властивостей
15 скінів для слайдера, 7 скінів для скроллбар і вбудована підтримка lightbox
Навігація з клавіатури, підтримка торкань і повна настраиваемость
І багато іншого
Однак найкраща особливість це Advanced Slider - jQuery XML Slider API, що робить слайдер ідеальним варіантів для вашого веб-додатки.
10. jQuery Slider Zoom In / Out Effect Fully Responsive
Один з тих JQuery слайдеров, які змусять вас подивитися демо, перш ніж ви почнете читати про його можливості. Ви просто захочете зрозуміти, що ж означає цей «zoom in / out effect».
Ефект зума досить слабкий, але він додає відчуття контролю і справжнього дотику зображення в той час, як інші слайдер статичні. Особливі можливості слайдера:
CSS3 переходи між шарами
Параметр закінчення анімації для шарів
Варіанти фіксованої ширини, на весь екран і на всю ширину
Анімований текст з HTML і CSS форматуванням
Більшість слайдеров намагаються увібрати в себе якомога більше ефектів, а в jQuery Slider Zoom In / Out Effect Fully Responsive є тільки ефект Ken Burns, але зате добре реалізований.
11. jQuery Carousel Evolution
Як і у вищезгаданого Advanced Slider - jQuery XML Slider, у jQuery Carousel Evolution є свій API, який можна використовувати для підвищення функціоналу або інтеграції слайдера в інший проект.
Як створити сайт самому?
Які технології та знання необхідні сьогодні, щоб створювати сайти самостійно? Дізнайтеся на інтенсивний!
З зображеннями, HTML розміткою, YouTube і Vimeo відео ви також отримаєте:
SEO оптимізацію
9 стилів каруселі
Ефекти тіні і відображення
Розмір зображень можна налаштувати, як передніх, так і задніх
jQuery Carousel Evolution - проста карусель з безліччю варіантів використання.
12. Sexy Slider
Sexy Slider вже не такий сексуальний як раніше. Однак через свій вік даний слайдер заслуговує довіри.
На перший погляд слайдер не сильно вражає, але якщо його добре налаштувати, він відмінно впишеться в ваш дизайн. можливості:
Автопроігриваніе слайдів
Підписи до зображень
Безперервне програвання слайдів
6 ефектів переходу
Sexy Slider чекає, коли ви відкриєте всю його міць і розкриєте потенціал.
13. jQuery Image & Content Scroller w / Lightbox
З усіма цими дизайнами під мобільні пристрої і підтримкою сенсорних екранів приємно бачити JQuery слайдер, який не забув про настільні комп'ютери.
jQuery Image & Content Scroller w / Lightbox підтримує введення з клавіатури і колесо миші, а також і інші можливості:
Горизонтальна і вертикальна орієнтація
Текстові підписи всередині або зовні слайдера
Можливість встановити певне число видимих \u200b\u200bза один раз слайдів
Вбудовані зображення, Flash, iframe, Ajax і інлайновий контент
Також в слайдері є вбудований lightbox. За бажанням в jQuery Image & Content Scroller w / Lightbox можна не запускати сам слайдер, а окремо запустити lightbox.
14. Translucent - Адаптивний ротатор банерів / слайдер
У більшості JQuery слайдеров свій дизайн. Ви можете його налаштувати під себе, але іноді просто хочеться, щоб все було всередині слайдера. Вашій увазі пропонується Translucent.
У слайдері дуже багато попередніх. Можливо, вам просто потрібно буде задати певні настройки і все. можливості:
6 різних стилів
4 ефекти переходів
2 переходу по свайпа
Кнопки і підписи
Як і інші, даний слайдер підтримує належним чином, адаптивен і має апаратне прискорення. Translucent - слайдер з мінімальним дизайном, який на перше місце ставить сам контент.
15. FSS - Full Screen Sliding Website Plugin
Ви хочете зробити повноекранний сайт, що складається зі слайдів? Тоді вам потрібен FSS.
Насправді, за допомогою даного JQuery слайдера вкрай легко створити повноекранний сайт-слайдер. можливості:
підтримка AJAX
скроллбар
Підтримка технології deep linking
2 різних ефекту переходів
Також варто звернути на підтримку клавіатури і 11-ти сторінковий гайд. Однак даний враження викликає вага FSS, всього 5Кб.
16. Zozo Accordion - Адаптивний тачскрін слайдер
Ще один приклад JQuery слайдера, зосередився на стилях, і який непогано справляється зі своєю роботою. Zozo Accordion обов'язковий тим, хто шукає хороший слайдер-аккордіон з можливістю зміни стилів.
Ця красуня з CSS3 анімацією також має досить широкий набір функцій:
Горизонтальний і вертикальний акордеон
Семантичний HTML5 і SEO оптимізація
Підтримка торкань, клавіатури і WAI-ARIA
Більше 10 скінів і 6 макетів
І багато іншого
У Zozo Accordion безкоштовна підтримка і постійні оновлення, а також всі функції, які ви хочете побачити в JQuery акордеоні.
17. jQuery Responsive OneByOne Slider Plugin
jQuery Responsive OneByOne Slider Plugin більше схожий на просту анімацію, а не на слайдер. Замість відображення одного слайда за раз, даний екземпляр покроково заповнює екран слайдами, поки в області не залишиться місця і тільки потім переходить до наступного слайду.
CSS3 анімація працює з-під Animate.css, вона легка, складається з декількох шарів і дружить з мобільними пристроями. Кілька функцій:
Є також опція навігації за допомогою drag and drop. jQuery Responsive OneByOne Slider Plugin працює на основі каруселі Twitter Bootstrap.
18. Accordionza - jQuery плагін
Немає jQuery слайдера легше цього. Для роботи необхідно завантажити всього 3Кб слайдера, що робить Accordionza самим легковажним слайдером типу акордеон.
Якщо вам не сподобалися три варіанти стилів, можете підправити HTML і CSS самостійно. можливості:
Навігація з клавіатури
Легкі в налаштуванні ефекти і кнопки
Техніка прогресивного поліпшення - працює без JavaScript
Пам'ятайте, що Accordionza може відображати безліч варіантів змішаного контенту, що робить його вкрай гнучким.
19. mightySlider - Адаптивний багатоцільовий слайдер
MightySlider дійсно потужний слайдер. Його можна використовувати не тільки як простий слайдер зображень, але і як повноекранний односпрямований слайдер з навігацією по пунктам меню. З його допомогою можна зробити прекрасний утворять єдиний сайт.
Під капотом ви знайдете безліч опцій:
Підтримка клавіатури, мишки і торкань
CSS3 переходи з апаратним прискоренням
Чистий валідна розмітка і SEO оптимізація
Необмежене число слайдів, шари для підписів і ефекти до них
API дуже потужний і доброзичливий до розробників, що відкриває різні способи його використання. MightySlider це чудовий, прогресивний JQuery слайдер з чистим і добре закоментувавши кодом.
20. Parallax Slider - Адаптивний jQuery плагін
Parallax Slider працює як jQuery Responsive OneByOne Slider Plugin і дозволяє анімувати кожен шар окремо всередині одного слайда. Анімувати можна всі слайди або навіть всього один, додавши паралакс анімацію.
У комплекті йде 4 слайдера різних типів, все з паралакс ефектом. Як і інші JQuery слайдери, він має:
повну настраиваемость
підтримку торкань
Повністю адаптивен, необмежене число шарів
Автопроігриваніе, зациклення, настройку висоти і ширини, а також таймер
Анімовані шари це не тільки текст або зображення. Також можна додати YouTube, Vimeo і HTML5 відео. Parallax Slider - ще один хороший приклад того, як можна імітувати Flash ефекти навіть краще ніж сам Flash, які до того ж підтримуються на всіх пристроях.
висновок
Цікаво спостерігати за тим, як jQuery слайдери виросли з чогось, що просто змінює одне зображення іншим, в величезний набір креативних інструментів. Зараз є 3D, паралакс слайдери, слайдери на всю сторінку, адаптивні і ті, які можна переглядати як на десктопних комп'ютерах, так і на смартфонах.
Якщо вам не сподобався жоден слайдер з даного списку, ви завжди можете пройти урок jQuery Code Tutorial на сайті Envato і розробити щось повністю нове і унікальне.
Ну або перегляньте інші слайдери на Envato Market - там є з чого вибрати. А який ваш улюблений JQuery слайдер, і чому?
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 c автоматичною зміною слайдів.
37. Нова версія плагіна «SlideDeck 1.2.2»
Професійний слайдер контенту. Можливі варіанти з автоматичною зміною слайдо, а також варіант з використанням колеса миші для переходу між слайдами.
38. jQuery слайдер «Sudo Slider»
Легкий Сладера зображень на jQuery. Дуже багато варіантів реалізації: горизонтальна і вертикальна зміна зображень, з посиланнями на номер слайда і без них, з підписами зображень і без, різні ефекти зміни зображень. Є функція автоматичної зміни слайдів. Посилання на всі приклади реалізації можна знайти на демонстраційній сторінці.
39. jQuery CSS3 слайд-шоу
Слайд-шоу зі слайдами підтримує режим автоматичної зміни слайдів.
40. jQuery cлайдер «Flux Slider»
Слайдер з безліччю ефектів зміни зображень.
41. Простий jQuery слайдер
Стильний слайдер зображень на jQuery.