Skip to content

Все для WordPress, веб-розробки — і не тільки

🎬 Slider Revolution 2026: огляд можливостей і посібник зі створення слайдерів

🎬 Slider Revolution 2026: огляд можливостей і посібник зі створення слайдерів

Придбали преміум-тему, а слайдер із демо не запрацював? Або зібрали слайдер у безплатному плагіні, а він смикається на мобільних і важить зайвих пів мегабайта? З п’ять слайдерів ми перебрали, перш ніж зупинилися на одному.

Slider Revolution від ThemePunch — це не просто «ще один слайдер». Це візуальний редактор для контенту будь-якої складності: від Hero-секції до односторінкового сайту на шарах. У 2026 році плагін живе у версії 7 і вміє таке, про що безплатні аналоги навіть не замислювалися: WebGL-ефекти, 3D-кластери частинок, симуляція рідин та AI-переклад шарів.

Нижче, чесний огляд і покроковий посібник. Що вміє сьома версія, як встановити (окремою покупкою або в складі теми) і, головне, як запустити перший слайдер за годину.

💡 Швидкий огляд:

  • Придбайте Slider Revolution на sliderrevolution.com (CodeCanyon більше не варіант, плагін пішов із маркетплейса) або активуйте копію з комплекту преміум-теми
  • Активуйте ліцензію в адмінці WordPress і налаштуйте глобальні параметри: дозволи доступу, точки перелому сітки, відкладене завантаження
  • Імпортуйте готовий шаблон із бібліотеки 200+ варіантів або створіть модуль з нуля
  • Наповніть слайди: фон, шари (текст, кнопки, відео, фігури, SVG), анімації та переходи
  • Налаштуйте навігацію, індикатор прогресу, скрол-ефекти та вставте шорткод на сторінку

Що таке Slider Revolution і що нового у версії 7

Преміум-плагін для WordPress від ThemePunch. За даними каталогу, понад 9 мільйонів активних встановлень і понад 200 шаблонів у бібліотеці. З коробки: слайдери, каруселі, Hero-блоки, односторінкові сайти та динамічні модулі на основі записів або товарів WooCommerce.

Якщо коротко: це не «слайдер із картинками». Це середовище, в якому кожен слайд збирається шарами, текст, кнопка, відео, SVG-фігура, рядок із колонками, як у конструкторі сторінок. Сцена збирається мишею на полотні, а не повзунками в бічній панелі, і результат видно одразу.

Версія 7, що вийшла після трьох років розробки, принесла повністю новий візуальний редактор і рушій рендерингу. Старі проєкти мігрують автоматично під час оновлення. З помітного: рушій WebGL для просунутих переходів, Fluid Dynamics (симуляція рідини, що реагує на курсор), The Cluster (3D-кластери частинок з орбітами та притяганням), AI Translate (автопереклад шарів із підтримкою WPML) і 30+ доповнень під будь-яку задачу.

Макети й адаптивність

Плагін давно вийшов за межі «слайдера з гортанням»: каруселі, «сцени» (одиночний слайд як рядок конструктора) і повноекранні модулі на вибір. Адаптивність не зводиться до стискання картинки, розумне успадкування (Smart Inherit) перебудовує шари під кожен пристрій, елементи змінюють розмір або приховуються. На мобільному слайдер залишається читабельним, а не мурашником із мікрокнопок.

Джерела контенту

Дев’ять варіантів наповнення. За замовчуванням, свої картинки й відео. Можна тягнути записи блогу (будь-які типи, включно з конкретними ID), товари WooCommerce, контент із Flickr, Instagram, Twitter, Facebook, YouTube і Vimeo. Останній варіант добрий для живих віджетів соціального доказу: слайдер сам оновлюється з появою нових постів.

Керування шарами

Кожен слайд, листковий пиріг. Додаєте текст, зображення, кнопки (зокрема пресети соцмереж і гамбургер-меню), фігури (фон, пульсація, обведення), аудіо, відео (YouTube, Vimeo, HTML5), іконки/SVG і рядки з колонками, як у повноцінному конструкторі. Групування шарів спрощує переміщення пов’язаних елементів. Для власників ліцензії відкрита бібліотека готових шарів ThemePunch та імпорт шарів з інших слайдерів установки.

Пресети й повторне використання

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

Встановлення: два шляхи

Плагін потрапляє на сайт або прямою покупкою на sliderrevolution.com, або активацією комплектної копії в складі преміум-теми. Розберемо обидва варіанти.

Покупка напряму на sliderrevolution.com

Сторінка покупки Slider Revolution на маркетплейсі

Раніше плагін продавався на CodeCanyon, але з виходом версії 7 ThemePunch повністю перейшов на прямі продажі через sliderrevolution.com. Після покупки заходите в особистий кабінет на сайті, завантажуєте zip-архів плагіна.

Розділ завантажень в особистому кабінеті покупця

Тепер в адмінці WordPress: Plugins → Add New.

Сторінка додавання нового плагіна WordPress

Кнопка Upload Plugin у лівому верхньому куті → Choose File → вибираєте завантажений zip → Install Now.

Завантаження zip-архіву плагіна через адмінку

Після встановлення, Activate Plugin. Готово.

Можна й через FTP: розархівуйте плагін і залийте папку в wp-content/plugins.

Плагін у складі преміум-теми

Більшість преміум-тем включають Slider Revolution у комплекті постачання. Точний порядок, у документації конкретної теми, але загальна логіка однакова.

Сповіщення про рекомендовані плагіни теми

Після активації теми з’являється сповіщення про рекомендовані плагіни. Натисніть на нього.

Список рекомендованих плагінів для встановлення

Потрапите на сторінку пов’язаних плагінів, встановіть і активуйте Slider Revolution.

Встановлення плагіна Slider Revolution зі списку

Деякі теми (наприклад, Total) пропонують встановити плагін прямо в процесі імпорту демоданих.

Опція імпорту слайдерів при встановленні демо-даних

Виберіть опцію «Import Sliders» під час імпорту демо, і тема сама підтягне всі кастомні слайдери з демонабору.

Перший запуск: налаштування та ліцензія

Після активації в головному меню адмінки з’являється пункт Slider Revolution.

Пункт меню Slider Revolution в адмінці

Звідси, створення та редагування модулів, імпорт шаблонів і активація ліцензійного ключа.

Активація ліцензії

Якщо купували плагін самостійно на sliderrevolution.com, активуйте ліцензію в адмінці, щоб відкрити всі функції, преміумшаблони та доповнення.

Сторінка активації ліцензії Slider Revolution

Ключ лежить в особистому кабінеті на sliderrevolution.com. Копіюєте та вставляєте в адмінці WordPress.

Ліцензійний ключ в особистому кабінеті покупця

В адмінці: розділ Slider Revolution → значок дзвоника → поле для ключа.

Вікно введення ліцензійного ключа в адмінці

Важливий нюанс: якщо плагін дістався в комплекті з темою, активація не потрібна. За оновлення відповідає розробник теми, а не ThemePunch. Плагін оновиться разом із темою, іноді із затримкою, але з гарантованою сумісністю. Зворотний бік: бібліотека преміумшаблонів ThemePunch і доповнення (add-ons) недоступні.

Глобальні налаштування

Перед першим слайдером зайдіть у підменю Global Settings.

Глобальні налаштування плагіна Slider Revolution

Тут важливі два параметри.

Дозволи (Permission). Обмежте доступ до плагіна лише адміністраторами. Корисно, якщо на сайті є запрошені автори, слайдери не зламають випадково.

Точки зупину сітки. Ширина в пікселях для адаптивного верстання під пристрої. Стандартні значення зазвичай підходять, але якщо сітка сайту нестандартна, підлаштуйте.

Решту, користувацькі шрифти, відкладене завантаження, примусове створення бази даних (якщо проблеми з таблицями), змінюйте за потреби. Збережіть налаштування.

Імпорт готового шаблону

Найшвидший старт, узяти шаблон із бібліотеки.

Бібліотека готових шаблонів на сайті Slider Revolution

На sliderrevolution.com завантажте файл модуля. В адмінці: Slider Revolution → Import Slider → виберіть файл → імпортуйте. Модуль разом зі слайдами, шарами та налаштуваннями з’явиться в бібліотеці, редагуйте під себе.

Галерея шаблонів в адмінці Slider Revolution

Власники прямої ліцензії бачать бібліотеку з понад 200 готових шаблонів. Наведіть курсор на макет: значок ока для попереднього перегляду, плюс для встановлення. Користувачі комплектних копій (у складі теми) цієї бібліотеки не бачать, але автори тем часто додають власні шаблони до демо-імпортера.

Створення слайдера з нуля

Три стартові точки: чистий аркуш, безкоштовний експорт із прикладів на сайті Slider Revolution та шаблони, вшиті в тему. Розберемо шлях з нуля, він же знадобиться під час редагування імпортованого шаблону.

Виберіть New Blank Module.

Стартове вікно створення нового модуля

З’явиться вітальне вікно з коротким посібником, натисніть «почати» та виконуйте кроки.

Вікно швидкого старту з посібником

Перший крок, тип модуля. Slider, класичний набір анімованих слайдів. Scene, одиночний слайд як рядок конструктора (для Hero-секцій). Carousel, кілька слайдів видно одночасно.

Вибір типу модуля слайдер або карусель

Другий крок, макет. Auto розтягне модуль до ширини контентного контейнера теми (висоту задаєте самі). Full Width, на всю ширину екрана від краю до краю. Full Screen, заповнює весь браузер незалежно від розміру пристрою.

Налаштування макета та розміру слайдера

Третій крок, адаптивність. Classic (Linear) Resizing, пропорційне стиснення (ширина та висота зменшуються разом із контейнером, шрифти та зображення масштабуються синхронно). Smart Inherit автоматично створює чотири розміри під пристрої на основі десктопних налаштувань, із можливістю редагування кожного. Custom (Manual), точні пікселі під кожну роздільну здатність.

Налаштування адаптивності слайдера під пристрої

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

Загальні налаштування модуля

Загальні налаштування нового модуля слайдера

Задаємо чотири речі:

  • Title та Alias, системне ім’я слайдера (Alias потрібен для шорткоду).
  • Layout, ширина та висота десктопної області. На тестовому сайті підбирали під ширину контентної зони.
  • Default duration, тривалість показу слайда. 5000 мс (5 секунд) для старту; потім підбирайте під темп контенту.
  • Spinner, прелоадер (15 варіантів на вибір).
Налаштування навігації слайдера стрілки та маркери

Виберіть, як відвідувач гортатиме слайди. У прикладі взяли стиль Uran, прості стрілки. Доступні: маркери (точки, 14 стилів), таби (мініатюра та заголовок, для модулів на основі записів), прев’ю-зображення (5 стилів), сенсорна навігація, клавіатура, миша з ефектом каруселі. Будь-який елемент налаштовується: положення, розмір, видимість, стиль.

Слайди та фон

Одразу після створення модуля ви вже на слайді №1, можна наповнювати.

Редактор першого слайда нового модуля

Фон: прозорий, колір (із градієнтом), зображення, зовнішнє зображення або відео з YouTube, Vimeo, HTML5.

Налаштування відеофону слайда через YouTube

Для відео: задайте джерело, увімкніть Force Cover Mode (розтягнути на весь слайдер) та Rewind at Start (відтворювати з початку під час кожного показу). Не забудьте мініатюру, для навігації та адмінки.

Налаштування фонового зображення слайда

Для зображення, завантаження з медіабібліотеки. Режим Cover (розтягнути з обрізанням під межі) або Contain (вписати без обрізання). Cover, стандарт для більшості сценаріїв.

Анімація переходу, на вибір із десятків варіантів. Фільтри (22 пресети), більше для слайдів із фоновим зображенням, справа смаку. Тривалість показу та пауза налаштовуються індивідуально. Правила публікації зручні для сезонних та акційних слайдів: зібрали заздалегідь, опублікували в потрібний день.

Шари, головний механізм

Кнопка + Add Layer у верхній частині екрана відкриває меню з 8+ типів шарів.

Меню додавання нового шару на слайд

Текст. Заголовки, описи, посилання. Шрифт, розмір, колір, вирівнювання, усе редагується прямо на полотні, а не в бічній панелі.

Редагування текстового шару на слайді

Зображення. Логотип, шари паралакса для глибини, набори «до/після» та додаткові картинки.

Налаштування шару зображення на слайді

Кнопки. Розмір, радіус межі, колір, фон, стан при наведенні, налаштовується все. Преcети для соцмереж, анімованих іконок прокручування, гамбургер-меню, кнопок Play/Pause.

Редагування кнопки шар на слайді

Фігури. Додають візуальний акцент: пульсація за кнопкою, виділення фрагмента тексту, кольорова підкладка. Налаштування: фон, колір і розмір обведення, радіус заокруглення (0, квадрат, 100, коло), відступи.

Налаштування шару-фігури з обведенням і фоном

Аудіо та відео. Завантажте з медіатеки або вставте посилання (YouTube, Vimeo, SoundCloud). Параметри: зациклення, автовідтворення, перехід до наступного слайда після завершення, гучність, сегмент (початок/кінець). Чудово підходить для відгуків клієнтів і вступних роликів.

Додавання аудіо або відео шару на слайд

Іконки / SVG. Вбудовані іконки або власні SVG, масштабуються разом із модулем без втрати якості.

Шар іконки SVG в редакторі слайдера

Рядки. Як у конструкторі сторінок: колонки всередині слайда. Організовують шари за сіткою.

Група. Об’єднує кілька шарів, переміщуються та налаштовуються разом.

Бібліотека та імпорт шарів. Готові асети ThemePunch (лише з ліцензією) і копіювання шарів з інших модулів бібліотеки.

Інші налаштування: короткий довідник

Нижче, розділи, які не потрапили до покрокового прикладу, але стануть у пригоді в реальній роботі.

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

On Scroll. Паралакс, 3D-глибина, шкала часу, затухання, розмиття, відтінки сірого. Налаштовуються швидкість і зміщення. Порада: не намагайтеся охопити все одразу, візьміть готовий шаблон зі скрол-ефектами та розберіть, як він влаштований.

Spinner. 15 варіантів прелоадера з настроюваними кольорами.

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

CSS / jQuery. Користувацький код для модуля, але без знання мов краще не чіпати.

Modal. Слайдер як спливне вікно або лайтбокс: позиція, колір обкладинки, шорткод (відрізняється від основного, додає атрибут використання).

Skin. Преcет оформлення текстових шарів. Один раз налаштуйте під бренд і застосовуйте до всіх шарів.

Add-ons. Доступні лише з прямою ліцензією, не входять до комплектних версій тем.

Навігація, детально. Прогрес (індикатор або коло за таймлайном), стрілки (13 стилів), маркери-точки (14 стилів), таби (для модулів із записів, мініатюра та заголовок), прев’ю (5 стилів мініатюр), сенсорна навігація, клавіатура, миша (карусель), редактор навігації для ручного коду.

Параметри слайда. Фон (прозорий, колір із градієнтом, картинка, відео), мініатюра (адмінка та навігація), анімація переходу, фільтри (22 пресети), прогрес (тривалість, пауза, видимість), правила публікації, теги та посилання (власний клас/id, лінк на весь слайд), параметри (до 10 довільних для використання в шарах і навігації), шари циклу та скрол-ефекти на рівні окремого слайда.

Відео: інтерфейс у дії

Подивіться, як усе це виглядає в реальному редакторі, відео від офіційного каналу Slider Revolution:

⁉️🤔 Часті запитання

Чим Slider Revolution відрізняється від безплатних слайдерів?

Безплатні плагіни (MetaSlider, Smart Slider 3 Free) дають базовий функціонал: завантажили зображення, налаштували стрілки, готово. Slider Revolution — це візуальне середовище з шарами, анімацією, WebGL-ефектами та динамічними джерелами контенту. Безплатні аналоги не вміють будувати Hero-секції, товарні каруселі та односторінкові сайти з паралаксом. Якщо сайту потрібен просто слайдер «три картинки, поїхали», безплатного вистачить. Для всього іншого, Revolution.

Чи потрібно активувати ліцензію, якщо плагін ішов у складі теми?

Ні. Комплектні копії працюють без ліцензійного ключа, за оновлення та сумісність відповідає автор теми. Зворотний бік: преміум-шаблони ThemePunch і доповнення (add-ons) недоступні, а оновлення виходять із затримкою, поки розробник теми їх протестує. Якщо потрібен доступ до всієї бібліотеки та миттєві оновлення, краще купити окрему ліцензію.

Чи сильно плагін навантажує сайт?

За правильного налаштування, ні. У глобальних налаштуваннях увімкніть відкладене завантаження (lazy load), не ставте більше 3-4 слайдів на модуль без потреби та використовуйте оптимізовані зображення (WebP/AVIF). На тестовому сайті з трьома слайдами та парою шарів у кожному додаткові 250-400 КБ, що в межах норми для медійного контенту. Головний пожирач швидкості, повноекранне відео в кожному слайді. Якщо відео критичне, ставте ліниве завантаження та вимикайте автовідтворення на мобільних.

Чи можна використовувати на кількох сайтах з однією ліцензією?

Залежить від плану. План Starter, 1 сайт (€45/рік). Enthusiast покриває 3 сайти (€89/рік). Scale розрахований на агентства та фрилансерів, до 250 клієнтських сайтів за €209/рік, актуальні тарифи на сайті Slider Revolution. Ціна за сайт на Scale падає нижче €1 на рік — це найвигідніша опція для веброзробників.

Чи складно освоїти з нуля?

Базовий слайдер із зображеннями та підписами, за 15-20 хвилин. Освоєння шарів, анімацій та скрол-ефектів, 2-3 вечори практики. Головний бар’єр не в складності, а в кількості налаштувань: коли відкриваєш редактор уперше, очі розбігаються. Порада: почніть з імпорту шаблону та розберіть, як його зібрано — це швидше, ніж читати документацію.

Що стало з разовою ліцензією на CodeCanyon?

ThemePunch прибрав плагін із CodeCanyon і відмовився від моделі «купив один раз, користуйся вічно». Причина проста: версія 7 писалася з нуля три роки, і разові платежі не покривають таку розробку. Старі ключі продовжують працювати на вже активованих сайтах, але для нових установок та оновлення до версії 7 потрібна річна передплата.

Що ставити у 2026 році: вердикт

Веб-розробник за робочим столом з WordPress

Slider Revolution, плагін не для всіх. Якщо потрібен простий слайдер із трьома зображеннями, беріть безплатний MetaSlider і не переплачуйте. Revolution стає на повний зріст, коли сайту потрібна Hero-секція з паралаксом, карусель товарів або лендинг на один екран, зібраний на шарах і WebGL-ефектах.

Практика показує: ті, хто ставить Revolution «просто щоб було», використовують малу частину можливостей і дарма оформлюють передплату. Ті, хто реально працює з шарами та динамічним контентом, не повертаються до інших слайдерів. Плагін недешевий (річна передплата від €45), але для комерційних проєктів і клієнтських сайтів окупається першим же слайдером, який не соромно показати.

Спробуйте демо на сайті Slider Revolution, одразу стане зрозуміло, ваш це інструмент чи ні.