Від автора:незважаючи на чутки про нібито "смерть" видимої без прокрутки частини веб-сторінок, потреба в хорошому слайдері нікуди не зникла. Давайте будемо чесними, хоч на секунду – це весело слайдери. До того ж, ніщо інше на відміну від контенту, що рухається, не викликає у користувача «вау» ефект. Всі слайдери є набором з декількох слайдів, що змінюють один одного і дуже важливо, щоб код слайдера був якомога легшим. Саме у таких випадках нам допоможе jQuery.
Погляньте на 20 jQuery слайдерів з сайту Envato Market, і ви зрозумієте, що бувають слайдери, які більш ніж просто блок з зображеннями, що плавно змінюються.
1. RoyalSlider – Тачскрін галерея зображень на jQuery
Зараз адаптивний слайдер, до того ж і дружелюбний сенсорним екранам, означає набагато більше, ніж раніше. RoyalSlider поєднує обидві функції: адаптивність і роботу з сенсорними екранами. Гарний вибір, тому що галерея написана на HTML5 та CSS3.
Декілька цікавих функцій:
Як створити сайт самому?
Висока налаштовуваність
Понад 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 підтримує введення з клавіатури та колесо миші, а також інші можливості:
Горизонтальна та вертикальна орієнтація
Текстові підписи всередині або зовні слайдера
Можливість встановити певну кількість видимих за один раз слайдів
Вбудовані зображення, 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 слайдер і чому?
У коментарях до посту нещодавно запитували чи існують якісь онлайн сервісидля їхнього створення. В принципі, якщо ваш проект працює на одній із популярних CMS (WordPress, Drupal), то там мають бути відповідні плагіни. Але що робити, коли сайт написаний на HTML або модулів немає? Сьогодні розповім про деякі варіанти вирішення цього завдання.
Загалом методи створення слайдерів різні. Пам'ятається, коли раніше працював з TYPO3, там був модуль, який автоматично перетворює картинки у флеш для відображення на сайті. Також є спеціальні десктопні програми, що дозволяють робити схожі флешки або генерують потрібний HTML+CSS код. Зараз слайдери в основному реалізуються за допомогою Javascript та відповідних бібліотек, наприклад, jQuery. Причому існує чимало різних скриптів. Парочку з них розгляну.
- Відмінний сервіс для створення слайдера онлайн. Вам не потрібно вникати у жодні скрипти, практично всі налаштування доступні для інтерактивного редагування: розміри, ефекти, навігація тощо. Ви просто завантажуєте свої картинки, вибираєте потрібні опції та завантажуєте готовий код слайдера. Все це є безкоштовно. У фінальному HTML є посилання на даний сервіс, але теоретично її можна прибрати, жодних додаткових водяних знаків на картинках немає. Розробникам респект!
ComSider
ComSider - ще один безкоштовний онлайн генераторслайдерів для веб-сайту. Принцип роботи схожий, складається з трьох кроків: завантаження картинки, вибір шаблону слайдера та його налаштування, інтеграція коду зі своїм сайтом. Шаблони слайдерів дозволяють створювати різні за дизайном елементи. При цьому в сервісі реально багато параметрів ефектів та інших опцій для отримання бажаного результату. На сайті сказано, що ви можете вбудувати код без завантаження файлів або завантажити їх і інтегрувати слайдер самостійно.
Cincopa
Cincopa - дуже симпатичний сервіс створення HTMLслайдер, але, на жаль, не повністю безкоштовний. Це один із багатьох подібних проектів, де є спеціальні тарифні плани. Для free версії, як правило, додаються різні обмеження за кількістю зображень, що завантажуються, трафіку, і (найгірше) розміщується водяний знак. При цьому все, звичайно, майстерно реалізовано - безліч тем оформлення, налаштування, плагіни для популярних CMS, тех.підтримка. Тут потрібно дивитися на тарифи, у деяких сервісах вони можуть бути цілком доступними.
Сервіс - один із небагатьох, де у безкоштовному тарифі немає водяних знаків на зображеннях. Обмежується лише кількість можливих ефектів, але це критично. Багато налаштувань, є спеціальний плагін для WordPress. Загалом непогане рішення.
HTML5Maker
HTML5Maker – ще один приклад платного сервісу, який працює за передплатою. У Free версії вам доведеться миритися з водяним знаком, проте початківець тариф Starter дозволяє його позбутися. При цьому він має відносно доступну ціну ($5/місяць) і дозволяє створювати до 3-х слайдерів з усіма ефектами та безліччю шаблонів.
Slippry
Наступний вид сайтів зі слайдерами - це проекти, що містять готові до роботи скрипти, наприклад Slippry. Тут немає жодних зручних форм із завантаженням фоток та зазначенням налаштувань, зате все безкоштовно. Ви завантажуєте код слайдера HTML на свій хостинг і вручну інтегруєте його з сайтом. На сторінках розробників, як правило, є документація щодо використання скрипта, пояснення за кодом та приклади роботи.
Glide
Взагалі слайдери бувають різні - Glide чудовий приклад. Скрипт дозволяє створити слайдер для фону сайту. Простий, швидкий, адаптивний.
TosRus
TosRus - ще один цікавий слайдер, який дещо відрізняється від класичної реалізації і більше схожий на галерею (проте, стане в нагоді). Він нормально відображається як на звичайному комп'ютері, так і смартфоні. При натисканні на картинку вона відкривається у повному вікні, де також буде слайдер. Підтримує вставку не тільки картинок, а й HTML контенту з відео.
Скрипт відмінно масштабує зображення, тому його створення максимально просте. На сайті знайдете приклад коду та опис. У слайдера є можливість навігації через стрілочки або елемент, що «підсвічується» в самому низу картинки.
Візуально слайдер для сайту виглядає дуже стильно. Існують елементи навігації, текстовий блок. Спільним фоном для елемента стає розмита картинка із самого слайдера, що створює дуже цікавий ефект.
- Адаптивний слайдер на jQuery, підходить для всіх пристроїв. Він може відображатись на всю ширину екрана або в окремому блоці. Опис досить «примітивний», але розібратися в ньому можна. Налаштувань не так багато, як у деяких інших варіантах.
Це рішення більше схоже на галерею, але мені особисто сподобалося. Простота використання, легкість налаштування та безкоштовність – основні плюси DesoSlide. Розробникам сайтів може стати в нагоді.
Проект розробники позиціонують як безкоштовну галерею jQuery, хоча візуально вона нагадує звичайний слайдер. Рішення сумісне з усіма основними браузерами має багато різних ефектів для зміни зображень. Сподобався розділ демо, де ви можете в реальному часі застосовувати ті чи інші налаштування, щоб подивитися як працює слайдер для сайту.
- простий, функціональний, jQuery, що настроюється, скрипт слайдера на HTML5 і CSS3. Рішення сумісне з усіма браузерами та підтримує адапативний дизайн. Розробникам сподобається.
Рішення стане в нагоді, якщо вам потрібно створити слайдер за типом каруселі, коли виводиться кілька картинок і вони автоматично прокручуються ліворуч/праворуч (наприклад, для рядка логотипів партнерів або відображення робіт). Нещодавно я розглядав як реалізувати це завдання WordPress, для звичайних сайтів можна спробувати скрипт jsSimpleSlider.
Сервіс із завантажених вами картинок створює флешку, яка відображається на сайті у вигляді слайдера. Працювати з цим інструментом просто, хоча класичний слайдер це мало схоже (як мінімум, не вистачає елементів управління). Все, що ви можете поставити в ньому, - це зовнішні посилання та ефекти переходу. Використовувати цей сервіс ви, думаю, навряд чи будете, просто наводжу його як один із варіантів реалізації поставленого завдання.
WOWSlider
Як я вже говорив спочатку, є програми для створення слайдерів, які встановлюються на комп'ютер. WOWSlider – чудовий приклад такого софту. Тут просто безліч різних опцій, налаштувань, тем оформлення і т.п. При цьому не потрібно ніяких знань HTML, все настроювання слайдера проводиться швидко і легко. Завантажити програму можна безкоштовно, але без покупки ліцензії на слайдері відображатиметься її логотип.
CU3OX
Програма CU3OX сподобалася незвичайним 3D ефектам для зміни зображень. Вона використовується для створення Flash галерей та слайдерів. Працює на Win та Mac. Тут є багато різних налаштувань, варіантів зміни картинок, локалізації різними мовами і т.п. Для персонального використання можна вибрати безкоштовну версіюхоча вона, на жаль, містить водяний знак.
Якщо цих сервісів, програм та скриптів слайдерів вам мало, то раджу почитати – там знаходиться близько 100 різних варіантівїхньої реалізації. Все, в принципі, залежить від вимог до функціональності та ваших знань. Спеціальні послуги створення слайдерів, зазначені на самому початку, працюють цілком непогано і є безкоштовними. Якщо ви добре знайомі з веб-розробкою, то зможете розібратися у наведених у статті 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 з автоматичною зміною слайдів.
37. Нова версія плагіна "SlideDeck 1.2.2"
Професійний слайдер контенту. Можливі варіанти з автоматичною зміною слайдо, а також варіант із використанням колеса миші для переходу між слайдами.
38. jQuery слайдер «Sudo Slider»
Легкий сладер зображення на jQuery. Багато варіантів реалізації: горизонтальна і вертикальна зміна зображень, з посиланнями на номер слайда і без них, з підписами зображень і без, різні ефекти зміни зображень. Існує функція автоматичної зміни слайдів. Посилання на всі приклади реалізації можна знайти на сторінці демонстрації .
39. jQuery CSS3 слайд-шоу
Слайд-шоу із мініатюрами підтримує режим автоматичної зміни слайдів.
40. jQuery слайдер "Flux Slider"
Слайдер із безліччю ефектів зміни зображень.
41. Простий jQuery слайдер
Стильний слайдер зображення на jQuery.
У цій статті розберемо дуже легко за допомогою CSS Flexbox і CSS трансформацій створити адаптивний слайдер для сайту.
Вихідні коди та демо слайдера
Проект слайдера під назвою chiefSlider розташований на GitHub. Перейти на нього можна за цим посиланням.
Слайдер з одним активним слайдом (без зациклювання):
Слайдер із трьома активними слайдами (без зациклювання):
Приклад, в якому показано, як можна застосувати слайдер для ротації статей:
Переваги слайдера chiefSlider
Перерахуємо основні переваги даного слайдера:
- по-перше, він не створює клони елементів (item)для організації зациклювання, як це реалізовано, наприклад, у плагінах OwlCarouselі slick;
- по-друге, він не залежить від бібліотеки jQuery; це не тільки прибирає додаткові вимоги, а й робить його більш легким;
- по-третє, він практично не вносить жодних змін у DOM документа; єдине, що він робить – це додає чи змінює значення CSS трансформацій у елементів слайдера;
- по-четверте, він містить лише мінімальний набірфункцій; додатковий функціонал можна додати залежно від завдання;
- по-п'яте, він є адаптивним, тобто. його можна використати на будь-яких сайтах; адаптивність слайдера налаштовується за допомогою CSS;
- по-шосте, кількість активних елементів налаштовується за допомогою CSS; це означає, що його можна використовувати для створення каруселі як з одним активним слайдом, так і з будь-якою іншою кількістю.
Установка слайдера chiefSlider
Установка слайдера виконується за 3 кроки:
- додати CSS слайдера chiefSlider на сторінку або CSS-файл, підключений до сторінки;
- помістити HTML код слайдера у потрібне місце сторінки;
- вставити JavaScript код на сторінку або js-файл, підключений до сторінки.
CSS і JavaScript код бажано мінімізувати, ця дія забезпечить швидше завантаження сторінки.
Як розробити простий слайдер для сайту (без зациклювання)
Створення слайдера chiefSliderскладатиметься зі створення HTML коду, CSS та JavaScript (без jQuery).
HTML код слайдера chiefSlider:
Як видно, слайдер має дуже просту архітектуру HTML. Починається вона з основного блоку, який має клас slider. Цей блок складається з 3 елементів.
Перший елемент - це .slider__wrapper. Він виступає як обгортка для елементів. slider__item (слайдів).
Інші два елементи (.slider__control) візуально є кнопками. З їхньою допомогою відбуватиметься навігація по слайду, тобто. перехід до попередніх та наступних елементів.
CSS код слайдера chiefSlider :
/* ОСНОВНІ СТИЛІ */ .slider ( position: relative; overflow: hidden; ) .slider__wrapper ( display: flex; transition: transform 0.6s ease; /* 0.6 тривалість зміни слайду в секундах */ ) .slider__item ( flex 50%;/* визначає кількість активних слайдів (у даному випадку 2*/max-width: 50%; /* визначає кількість активних слайдів (в даному випадку 2 */ ) /* СТИЛІ ДЛЯ КНОПОК "НАЗАД" І "ВПЕРЕД" */ .slider__control ( position: absolute; display: none; top: 50%; transform: translateY(-50 %), align-items: center; justify-content: center; text-align: center; width: 40px; / background: #000; /* колір фону */ ) .slider__control_show ( display: flex; ) .slider__control:hover, .slider__control:focus ( text-decoration: none; outline: 0; / ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0; ) .slider__control::before ( content: ""; display: inline-block; width: 20px; /* ширина іконки (стрілочки) */ height: 20px; /* висота іконки (стрілочки) */ background: transparent no-repeat center center; background-size: 100% 100%; ) .slider__control_left::before ( background-image: url("data:image/svg+xml ;charset=utf8,%3Csvg xmlns="http://ww w.w3.org/2000/svg" fill="%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5 -1.5-1.5z"/%3E%3C/svg%3E"); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E"); )
Як видно, CSS код слайдера теж є не дуже складним. Основні визначення, за допомогою яких можна налаштувати зовнішній виглядслайдера, забезпечені коментарями.
CSS код, який визначає кількість активних елементів:
/* визначає кількість активних слайдів (у цьому випадку 2) */ flex: 0 0 50%; max-width: 50%;
Цей код встановлює слайдеру кількість активних елементів, що дорівнює 2.
Для того, щоб слайдер, наприклад, мав один активний елемент, ці визначення необхідно змінити на такі:
/* визначає кількість активних слайдів (у цьому випадку 1) */ flex: 0 0 100%; max-width: 100%;
створіння адаптивного слайдераздійснюється за допомогою медіа запитів.
Наприклад, слайдер, який на пристроях з крихітним екраном повинен мати один активний слайд, а на великих - чотири:
Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )
JavaScript код слайдера chiefSlider :
"use strict"; var multiItemSlider = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // основний елемент блоку _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обгортка для.slider-item_s = _mainElement.querySelectorAll(".slider__item"), // елементи (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // елементи керування _sliderControlLeft = _mainElement.querySelector(".slider кнопка "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // кнопка "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обгортки _itemWid. // ширина одного елемента _positionLeftItem = 0, // позиція лівого активного елемента _transform = 0, // значення трансформації. // масив елементів // наповнення масиву _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 ))); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());
Основна дія в коді JavaScript виконує функція _transformItem. Ця функція в залежності від переданого їй напрямку виконує трансформування елемента. slider__wrapper.
Ініціалізація слайдераздійснюється наступним чином:
Var slider = multiItemSlider(".slider") Демо слайдера
Як створити слайдер із зациклюванням?
Зациклювання слайдів можна виконати за допомогою трансформування елементів. slider__item.
Для цього необхідно до кожного елемента slider__item прив'язати значення його поточної позиції та трансформації.
Найбільш оптимально ці дії можна виконати за допомогою масиву _items:
Var _items =; // наповнення масиву елементами.
Але зв'язати дані з елементами можна виконати не лише за допомогою масиву, а, наприклад, за допомогою data-атрибутів. Але операції з DOM найповільніші та ресурсомісткі, їх не рекомендується використовувати, коли це можна виконати якось інакше.
Наступний крок - це створити функції для обчислення елементів slider__item з мінімальною і максимальною позицією.
Var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index)) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) (indexItem = index;))); return indexItem; ), getMin: function () ( return _items.position; ), getMax: function () ( return _items.position; ) )
Останній основний крок, який належить виконати - це доопрацювати функцію _transformItem. А саме додати до неї код, який змінюватиме позицію елемента .slider__itemта виконувати його трансформацію.
Var _transformItem = function (direction) ( var nextItem; if (direction === "right") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getMax()) _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (direction === "left") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
nextItem = position.getItemMax();
_items.position = position.getMin() - 1;
_items.transform -= _items.length * 100;
_items.item.style.transform = "translateX(" + _items.transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}
Насправді, тут все просто.
Наприклад, для того щоб здійснити перехід до наступного слайду спочатку в масиві items шукається елемент з більшою позицією, ніж у поточного крайнього правого елемента.slider__item .
Якщо такий елемент у масиві є , то виконується трансформація елемента.
А от якщо такого елемента немає, то крім трансформації. slider__wrapper, виконується ще ряд дій. По-перше, у масиві items шукається елемент з мінімальною позицією. Після отримання цього елемента йому встановлюється позиція, значення якої дорівнює значенням поточного правого елемента + 1. Ну і звісно виконується його трансформація, таку кількість відсотків, що він опинився наприкінці , тобто. після останнього елемента.
Для початку попереднього слайду виконуються аналогічні дії, але навпаки.
Крім цього для слайдера із зациклюванням не потрібно перемикати видимість кнопок "Вліво" та "Вправо". Дані кнопки цієї версії слайдера будуть відображатися завжди .
Щоб це виконати, необхідно:
- видалити клас slider__control_show у елемента керування "Вправо";
- CSS для селектора.slider__control змінити значення властивості display на flex .
Як створити слайдер із зациклюванням та автоматичною зміною слайдів?
Запрограмувати автоматичну зміну слайдів через певні проміжки часу можна за допомогою функції setInterval.
Var _cycle = function (direction) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )
Функція setInterval у цьому прикладі запускатиме функцію _transformItem через певні інтервали часу, рівні значення зміною _config.interval .
Крім цього, зупинку автоматичної зміни слайдів бажано ще додати при піднесенні курсору до слайдера.
Здійснити цей функціонал можна так:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_inter _config.direction); ));
Як зупинити автоматичну зміну слайдів, якщо елемент не видно користувачеві?
Вимкнути автоматичну зміну слайдів доцільно у двох випадках:
- коли сторінка (на якій розташований цей слайдер) є не активною;
- коли слайдер знаходиться поза межами області видимості сторінки.
Обробку першого випадку можна здійснити за допомогою події visibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Функція для обробника події visibilitychange:
// обробка події "Зміни видимості документа" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Обчислення видимості елемента можна організувати за допомогою функції _isElementVisible:
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || return document.elementFromPoint(x, y); ), if (rect.right< 0 || rect.bottom < 0 || rect.left >vWidth || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom))); )
Можна помістити виклик _isElementVisible, наприклад, на початок функції _transformItem . Ця дія дозволить скасувати автоматичну зміну слайдів, якщо слайдер в даний момент знаходиться поза viewport.
Var _transformItem = function (direction) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Слайдер, який реагує на зміну розмірів вікна браузера
Даний варіант адаптивного слайдера відрізняється від попередніх тим, що він дозволяє змінити кількість активних елементів (слайдів) при зміні розмірів вікна браузера. Зазвичай користувачі не змінюють розмір браузера, але це може статися.
Реалізовано це за допомогою використання події resize та масиву _states. Масив використовується для обчислень. Його застосування дозволить не виконувати переініціалізації слайдера, коли це не потрібно.
Якийсь час тому я почав освоювати jQuery. Думаю, всі знають, що так називається найпопулярніша бібліотека для розробки та створення сценаріїв (скриптів) на JavaScript. З її допомогою дуже просто створювати ефектні та інтерактивні елементи сайту.
У цій статті хочу розповісти, як створити простий універсальний слайдер з використанням jQuery. Насправді, в мережі дуже багато різноманітних готових слайдерів, які часом виглядають дуже привабливо, і досить функціональні, але ми зробимо його з нуля.
Отже, які особливості нашого слайдера на jQuery (я назвав HWSlider) можна відзначити?
- Простота використання та оформлення – я хотів створити простий сценарій без наворотів, тому я не використовував анімації на CSS3, а код вийшов дуже універсальним і зрозумілим.
- Можливість вставляти в слайди як зображення, і будь-який HTML – код.
- Можливість прокручувати слайди як у порядку (вперед - назад), і вибирати кожен слайд (1,2,3,4…)
- Посилання, що автоматично формуються (попередній – наступний, і з номерами слайдів). Вам потрібно лише вставити потрібну кількість div-ів, а все інше розрахується саме. Ну і можна зазначити, що кількість слайдів необмежена.
Скрипт сумісний з усіма сучасними браузерами: IE, Opera, Firefox, Safari, Chrome, (бо слайдер не використовує CSS3).
Почнемо з HTML розмітки. У потрібне місце html сторінкиабо шаблон потрібно вставити.
Тут все просто, як видно, ви можете вставляти скільки завгодно слайдів шляхом створення нових div-ів. Всередину їх можна вставляти будь-який HTML код, наприклад картинку або блок з текстом. Не забудьте тільки підключити саму бібліотеку на jQuery разом зі всіма js - скриптами. Якщо не знаєте, як, дивіться в прикладі.
#slider-wrap( /* Оболонка слайдера і кнопок */ width:660px; ) #slider( /* Оболонка слайдера */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; ) .slide( /* Слайд */ width:100%; height:100%; ) .sli-links( /* Кнопки зміни слайдів */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton( /* Посилання " Наступний" і "Підхідний" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat;opacity:0.8;z-index:3;outline:none!important;) #prewbutton(left:10px;) #nextbutton( right:10px; background :url(arrowBg.png) right center no-repeat;) #prewbutton:hover, #nextbutton:hover( opacity:1;)
Давайте розберемо його докладніше. Спочатку ми даємо основному блоку з ідентифікатором slider-wrap, потрібну ширину. Так як в нього вставляються всі інші блоки, то висоту можна не ставити, вона залежатиме від того, що буде всередині. Потім нам потрібно задати розміри контейнера, в якому будуть знаходитися слайди. Це – #slider. Задамо йому ширину і висоту, а також, наприклад, кордон 10 пікселів. Тут ширина – 640px це менше ніж ширина батька, тому що ми додаємо межі шириною по 10px праворуч та ліворуч. Від ширини цього div-а також залежить і ширина самих слайдів (.slide).
І останнє: нам потрібно обов'язково задати position:relative для контейнера слайдів, оскільки слайди всередині - з абсолютним позиціонуванням. Для самих слайдів у CSS задається лише ширина та висота. Інші властивості задаються вже в jQuery скрипті.
Селектор.sli-links це блок, в якому будуть кнопки переходу на необхідний слайд. Ці кнопки являють собою прості елементи виду , які вставляються в необхідній кількості автоматично, разом з їхнім батьком.sli-links. Для кнопок ми задаємо Гарний вид, а саме робимо кожну кнопку квадратної, вирівнюємо їх усі по центру, а також завдяки overflow:hidden і text-indent:-9999px, прибираємо текст, залишаючи тільки фонові іконки, які так само змінюються при наведенні на цей елемент курсора. Для зручності я використав спрайти, що зменшило кількість зображень.
Далі оформляється активна кнопка. Просто змінюємо положення тла. Потім переоформимо посилання для переходу на слайди, що здійснює і попередній. Ви можете дати їм будь-яке оформлення, як і кнопкам. Ці посилання вставляються автоматично всередину #slider. Але щоб їх було видно, я поставив їм абсолютне позиціонуванняі верхній шар (z-index:3), щоб вони відображалися над слайдами. Думаю з CSS тут все зрозуміло і просто: ви можете змінити майже всі характеристики, щоб оформити слайдер так, як вам потрібно.
Давайте тепер розглянемо сценарій:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = arrow; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum). ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function()( animSlide("next"); )) $( "#prewbutton").click(function()( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " "; }); $("
Спочатку в змінних зберігаються налаштування: hwSlideSpeed - швидкість перегортання слайдів, hwTimeOut - через який відбувається автоматична зміна слайду, hwNeedLinks - управляє посиланнями "Наступний" і "Попередній" - якщо значення цієї змінної одно true, то ці посилання відповідно їх не буде (як на головній сторінці мого блогу).
Далі ми встановлюємо необхідні CSS властивості для слайдів за допомогою css(). Блоки зі слайдами ми накладаємо один на одного, використовуючи абсолютне позиціонування, потім приховуємо їх все.hide(), а потім показуємо лише перший. Змінна slideNum – це номер активного слайда, тобто лічильник.
Основна логіка роботи нашого jQuery слайдера – це функція animSlide. Вона приймає один параметр. Якщо ми передамо в неї рядки "next" або "prew", то спрацюють умовні оператори та буде відображено відповідно наступний або попередній слайд. Якщо ж ми надішлемо як значення цифру, то це число стане активним слайдом і він буде показаний.
Таким чином, ця функція приховує поточний div, вираховує новий і показує його.
Зауважте, що методу .fadeIn(), який робить видимим активний слайд, заданий другий аргумент. Це так звана функція зворотного виклику. Вона виконується, коли слайд з'явиться повністю. У цьому випадку це зроблено для автоматичного прокручування слайдів. Функція rotator, визначена нижче, викликає знову функцію animSlide для переходу на наступний слайд через необхідний інтервал часу: ми отримаємо замикання, що забезпечує постійне прокручування.
Все працює нормально, але нам потрібно зупинити виконання автоматики, якщо користувач підводить курсор до слайдера або натискає кнопки. Для цього створено змінну pause. Якщо значення позитивно - true, значить автоматичного перемикання нічого очікувати. За допомогою методу.hover() ми вказуємо: очистити таймер якщо він запущений - clearTimeout(slideTime), і встановити pause = true. А після відведення курсору відключити паузу і запустити замикання rotator().
Додатково нам потрібно створити нові елементи на сторінці та помістити їх у потрібне місце. Використовуючи цикл each() для кожного слайда (div-а з классом.slide), створимо елемент span усередині якого буде число - номер слайда. Це число використовується у функції анімації, щоб перейти до слайда з цим номером. Обернемо все в div з потрібними класами, і в результаті отримаємо таку розмітку:
Здавалося б, навіщо ми створюємо розмітку всередині скрипта, а не в HTML-коді? Справа в тому, що наприклад, якщо у користувача відключені скрипти - він не побачить елементів, які не працюватимуть, і це не введе його в замішання. Крім того, спрощується код, що непогано для SEO.
У результаті розмітка слайдера буде виглядати приблизно так (як слайди я використав зображення, і встановив 5 штук):
Нижче ви можете подивитися, як працює наш jQuery слайдер на демо сторінці, та скачати всі необхідні вихідні коди.
Насамкінець, кілька моментів про інтеграцію цього слайдера з Drupal. Ви можете додати цей код у файл шаблону, наприклад page.tpl.php, і прикріпити скрипт окремими js-файлом до теми. Jquery Drupal включений за замовчуванням, але працює в режимі сумісності (). Є два варіанти доопрацювання. Або обернути весь js код:
(function ($) ( // Весь ваш код ...)) (jQuery);
або замінити символи $ у всьому скрипті на jQuery. Ось так:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // і т. д .
У прикладі вже реалізовано перший метод.
Дякуємо за прочитання! Залишайте коментарі, приходьте ще. А також ви можете підписатися на RSS, щоб отримувати оновлення блогу першими!
Додано:Це ще не все. Читайте . Там ми додамо нові можливості для цього скрипту.
