Власний слайдер на jQuery. Простий адаптивний тач jQuery слайдер Красиві слайдери на jquery

У цій статті розберемо дуже легко за допомогою CSS Flexbox і CSS трансформацій створити адаптивний слайдер для сайту.

Проект слайдера під назвою chiefSlider розташований на GitHub. Перейти на нього можна за цим посиланням.

Слайдер з одним активним слайдом (без зациклювання):

Слайдер із трьома активними слайдами (без зациклювання):

Приклад, в якому показано, як можна застосувати слайдер для ротації статей:

Перелічимо основні переваги даного слайдера:

• по-перше, він не створює клони елементів (item) для організації зациклювання, як це реалізовано, наприклад, у плагінах OwlCarousel та slick;
• по-друге, він не залежить від бібліотеки jQuery; це не тільки прибирає додаткові вимоги, а й робить його легшим;
• по-третє, він практично не вносить жодних змін до DOM документа; єдине, що він робить – це додає чи змінює значення CSS трансформацій у елементів слайдера;
• по-четверте, він містить лише мінімальний набір функцій; додатковий функціонал можна додати залежно від завдання;
• по-п'яте, він є адаптивним, тобто. його можна використовувати на будь-яких сайтах; адаптивність слайдера налаштовується за допомогою CSS;
• по-шосте, кількість активних елементів налаштовується за допомогою CSS; це означає, що його можна використовувати для створення каруселі як з одним активним слайдом, так і з будь-якою іншою кількістю.

Установка слайдера виконується за 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; 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; /* ширина кнопки */ height: 50px; /* висота кнопки */ opacity: .5; /* прозорість */ background: #000; /* колір фону */ . slider__control:focus ( text-decoration: none; outline: 0; opacity: .9; /* прозорість */ ) .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://www.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. dth), // ширина одного елемента _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 (_ ; ) 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 слайдерів зображень, що з'явилися останнім часом і розповсюджуються без будь-яких обмежень, тобто. абсолютно безкоштовно.

Адаптивний jQuery слайдер зображень з чудовим набором візуальних ефектів (повороти, вильоти, розмиття, спіралі, жалюзі тощо) та безліччю готових шаблонів. За допомогою вбудованого в WOW Slider майстра вставки на сторінку, ви зможете легко і невимушено створювати чудові слайд-шоу за лічені хвилини. На сайті розробника є вся необхідна документація з налаштування та використання плагіна Російською мовою, чудові живі приклади роботи плагіна. Також доступні для скачування окремий плагін Wordpress та модуль для Joomla. Упевнений, що багатьом сподобається цей чудовий слайдер, як новачкам, так і веб-майстрам, що набридли.

HiSlider - HTML5, Jquery слайдер та галерея зображень, абсолютно безкоштовний плагін для особистого користування на сайтах під управлінням популярних систем - WordPress, Joomla, Drupal. За допомогою цього простого, але досить функціонального інструменту, ви зможете без особливих зусиль створювати на сторінках своїх сайтів, дивовижні та яскраві слайд-шоу, ефектні презентації та анонси нових повідомлень. Кілька готових шаблонів і скінів для слайдера, приголомшливі ефекти переходу (зміни) змісту, виведення різного мультимедійного контенту: , відео з YouTube та Vimeo, гнучкі налаштування користувача і т.д.

Nivo Slider — старий-добрий, добре відомий всім, хто в темі, один із найкрасивіших і найпростіших у використанні слайдер зображень. Плагін JQuery Nivo Slider є безкоштовним для завантаження та подальшого використання, що поширюється під ліцензією MIT. Також є окремий плагін для WordPress, але на жаль вже платний і відвалити за нього доведеться 29 $ за одну ліцензію. Краще все ж таки трохи почаклувати з файлами теми WP і прикрутити вільну jQuery версію плагіна Nivo Slider до свого блогу, благо інформації як це зробити в мережі достатньо.
Щодо функціоналу, з цим все в повному порядку. Для роботи використовується бібліотека jQuery v1.7+, гарні ефекти переходів, прості та дуже гнучкі налаштування, адаптивний макет, автоматичне обрізання зображення та багато іншого.

Ідея слайдера була навіяна розробникам, добре відомим усім стилем представлення продукції Apple, де кілька невеликих предметів змінюються по кліку на обрану категорію з простим ефектом анімації. Codrops представляє у ваше розпорядження докладний урок створення цього слайдера, повний розклад Html-розмітки, набір правил CSS і плагін, що виконується jQuery, а також чудовий живий приклад використання слайдера.

Повноекранний слайдер зображень на JQuery та CSS3 + докладний підручник з інтеграції плагіна на сторінки сайту. Ідея полягає в тому, щоб нарізати відкритий поточний слайд з певним контентом під час переходу до наступного або попереднього змісту. За допомогою JQuery та CSS анімації ви зможете створювати унікальні переходи між слайдами. Адаптивний макет слайдера гарантує, що він однаково добре виглядатиме на екранах різних типів пристроїв користувача.

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

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

Дуже простий, 100% адаптивний та повноекранний jQuery слайдер зображень. Робота слайдера заснована на CSS переходах (властивість transition) у зв'язці з магією jQuery. Значення max-width за замовчуванням встановлено на 100%, тому розмір картинок змінюватиметься залежно від змін розмірів екрана. Ніяких особливих анімаційних ефектів та вишукувань в оформленні, все просто, і заточено на безперебійну роботу.

Назва каже сама за себе, це мабуть один із найлегкіших і мінімалістичних jQuery слайдерів зображень, які мені зустрічалися (плагін в 1kb). ResponsiveSlides.js – крихітний плагін JQuery, який створює слайд-шоу, використовуючи елементи всередині контейнера. Працює з широким діапазоном браузерів, включаючи всі версії IE - знаменитого гальма прогресу від IE6 і вище. У роботі використовуються CSS3 переходи у зв'язці з JavaScript, для надійності. Проста розмітка з використанням неупорядкованого списку, налаштування переходів та часових інтервалів, автоматичне та ручне керування перемиканням слайдів, а також підтримка одразу кількох слайд-шоу. Ось такий ось швидкий «малюк».

Camera – безкоштовний JQuery плагін для організації слайд-шоу на сторінках сайтів, легкий слайдер з безліччю ефектів переходів, зі 100% адаптивним макетом, та дуже простими налаштуваннями. Чудово впишеться на екрани будь-яких пристроїв користувача (монітори ПК, планшети, смартфони та мобільні телефони). Можливість демонстрації вбудованого відео. Автоматична зміна слайдів та ручне керування за допомогою кнопок та блоку мініатюр зображень. Майже повноцінна галерея картинок у компактному виконанні.

Ще один досить простий адаптивний слайдер на jQuery. У слайдах можна розміщувати будь-який контент, відео, зображення, текст та інші елементи. Розширена підтримка сенсорних дисплеїв. Використання CSS-анімації переходів. Багато різноманітних варіацій представлення слайд-шоу і компактних галерей зображень. Автоматичне та ручне управління. Перемикання слайдів за допомогою кнопок та вибору мініатюр. Невеликий розмір вихідного файлу, дуже простий у налаштуваннях та реалізації.

FlexSlider 2 — Оновлена ​​версія однойменного слайдера, з покращеною швидкістю реагування, мініфікацією скрипту та зведенням до мінімуму перекомпонування/перемальовки. Плагін включає базовий слайдер, контроль управління слайдами за допомогою мініатюр, вбудованих стрілок вліво-вправо і нижньої панелі навігації у вигляді кнопок. Можливість виведення в слайдах відео (vimeo), гнучкі налаштування параметрів (переходи, оформлення, інтервал часу), повністю адаптивний макет.

Добре відомий та досить популярний, адаптивний плагін jQuery для створення високоякісних галерей та слайдерів зображень. Інтерфейс слайдера, завдяки його панелі керування візуально нагадує звичний відеоплеєр, до складу плагіна входить кілька різних тем оформлення. Підтримка вбудованого відео та зображень із популярних сервісів: Flickr, Vimeo, YouTube та інших. Детальна документація з налаштування та використання.

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

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

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

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

Прекрасний такий, адаптивний слайдер зображень від Володимира Кудінова співтовариші. Добротний, якісно опрацьований інструмент, надається з наочними прикладами та докладною інструкцією зі створення, встановлення та використання. Адаптивний дизайн, симпатичні кнопки та стрілочки зеленого кольору, все досить мило та спокійно, без натиску.

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

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

Коли замислювалися над тим, щоб було б непогано мати можливість працювати з русифікованими шаблонами? Просто подумайте на хвилинку. Жодної витрати часу на роботу з англомовними шаблонами. Поспішаємо вас порадувати тим, що на маркетплейсі TemplateMonster тепер можна знайти. Текст для кожного з них було написано вручну. І, звичайно, всі готові рішення неймовірно прості у використанні.

З повагою Андрій

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

Погляньте на 20 jQuery слайдерів з сайту Envato Market, і ви зрозумієте, що бувають слайдери, які більше ніж просто блок з зображеннями, що плавно змінюються.

Зараз адаптивний слайдер, до того ж і дружелюбний сенсорним екранам, означає набагато більше, ніж раніше. RoyalSlider поєднує в собі обидві функції: адаптивність та роботу з сенсорними екранами. Хороший вибір, тому що галерея написана на HTML5 та CSS3.

Декілька цікавих функцій:

JavaScript. Швидкий старт

SEO оптимізація

Висока налаштовуваність

Понад 10 початкових шаблонів

Є фолбек для CSS3 переходів

На мій погляд, найкрутіша функція це «модульна архітектура скрипта», що дозволяє відключати з основного JS файлу непотрібні речі, тим самим зменшуючи вагу. RoyalSlider, тачскрин галерея зображень на JQuery – надійний JavaScript слайдер, який має поповнити набір інструментів будь-якого розробника.

Не так просто зробити щось «революційне» зі слайдером. Коли мова заходить про слайдерів, можна додати стільки багато функцій. Однак Slider Revolution це справді хороша спроба. Серед JQuery слайдерів цей екземпляр відповідає всім вашим можливим вимогам.

Список можливостей слайдера настільки великий, тому я перелічу тільки най-най:

Паралакс ефект і анімація користувача

Необмежену кількість шарів та слайдів з посиланнями

ready to use, стилі, що глибоко налаштовуються

і багато іншого

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

За назвою «LayerSlider адаптивний jQuery плагін слайдер» не можна по-справжньому оцінити цей слайдер.
200+ 2D та 3D переходи між слайдами закрутять голову будь-кому.

Парочка чудових функцій:

13 скінів та 3 типи меню

Можливість розмістити фіксоване зображення поверх слайдера

І JQuery фолбек

І багато іншого

Як і з попереднім слайдером, можна додати майже будь-який контент, навіть HTML5-резидентний мультимедіа контент. LayerSlider пожвавлює слайдери, до того ж він дуже гарний.

jQuery Banner Rotator / Slideshow - Досить простий слайдер, що не приносить в жертву основний функціонал.

Можливості:

Тултипи, текстові вставки та ін.

попередній перегляд та різні варіанти перегляду компонентів

Таймер із затримкою на один слайдер або на все

Множинні переходи всіх слайдів або різні переходи для кожного окремо

jQuery Banner Rotator / Slideshow в порівнянні з іншими JQuery слайдерами має тільки базові можливості, але про нього не варто забувати.

Будь-який слайдер, що з'являється в мережі, має своє унікальне бачення і вирішує будь-які проблеми у своїй галузі. Але лише не цей. All In One Slider можна назвати "все включено".

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

Ротатор банерів

Банер з превью

Банер з плейлистом

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

Карусель

Всі типи слайдерів підтримують більшу частину функціоналу, якщо не весь, який необхідний JQuery слайдерам. Чи стане All In One Slider вашим "все включено"?

Якщо ваш слайдер не є адаптивним і не підтримує сенсорні екрани, то у вас неправильний слайдер. UnoSlider – правильний.

Цей слайдер знайшов своє місце під сонцем між простотою та багатим набором функцій. Функції:

Підтримка тем

12 готових тем

40 переходів

Підтримка IE6+

Всі функції з ухилом у дизайн та стиль, що робить UnoSlider відмінним контентним слайдером з можливістю додавання тем.

Шукайте "один JQuery слайдер, щоб правити всіма"? Спробуйте Master Slider – JQuery тачскрін слайдер під різні розміри екрану.

Коли справа стосується гарного дизайну, цей екземпляр один із найкращих:

Понад 25 шаблонів

Переходи з апаратним прискоренням

Підтримка торкань та свайпів

І багато іншого

Інтерактивні переходи, анімовані шари та хотспоти напевно привернуть вашу увагу. Master Slider – витвір мистецтва.

TouchCarousel приваблює безкоштовною підтримкою та оновленнями. Однак це не всі функції цього легковажного слайдера JQuery типу карусель.

Якщо в назві є слово «touch», можна здогадатися, що слайдер повністю адаптивний і підтримує торкання. Інші функції:

SEO оптимізація

Розумне автовідтворення

CSS3 переходи з апаратним прискоренням

Налаштований UI і 4 скіни для фотошопу

TouchCarousel через свою унікальну фізичну прокрутку слайдів це абсолютно новий рівень відчуттів на мобільних пристроях.

jQuery слайдери можна використовувати не лише на сайтах. Також вони можуть стати в нагоді у веб-додатках. Advanced Slider дозволяє це зробити.

З HTML або XML розміткою цей просунутий слайдер справляє незабутнє враження:

Анімовані шари та розумне відео

100+ переходів і 150+ властивостей, що настроюються

15 скінів для слайдера, 7 скінів для скроллбару та вбудована підтримка lightbox

Навігація з клавіатури, підтримка дотиків та повна настроюваність

І багато іншого

Однак найкраща особливість це Advanced Slider - jQuery XML Slider API, що робить слайдер ідеальним варіантом для вашого веб-програми.

Один з тих JQuery слайдерів, які змусять вас переглянути демо, перш ніж ви почнете читати про його можливості. Ви просто захочете зрозуміти, що означає «zoom in/out effect».

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

CSS3 переходи між шарами

Параметр закінчення анімації для шарів

Варіанти фіксованої ширини, на весь екран та на всю ширину

Анімований текст з HTML та CSS форматуванням

Більшість слайдерів намагаються увібрати в себе якнайбільше ефектів, а в jQuery Slider Zoom In/Out Effect Fully Responsive є тільки ефект Ken Burns, але добре реалізований.

Як і у вищезгаданого Advanced Slider — jQuery XML Slider, jQuery Carousel Evolution має свій API, який можна використовувати для підвищення функціоналу або інтеграції слайдера в інший проект.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі створення веб-додатку

З зображеннями, HTML розміткою, YouTube та Vimeo відео ви також отримаєте:

SEO оптимізацію

9 стилів каруселі

Ефекти тіні та відображення

Розмір зображень можна налаштувати як передніх, так і задніх

jQuery Carousel Evolution – проста карусель із безліччю варіантів використання.

Sexy Slider вже не такий сексуальний, як раніше. Однак через свій вік даний слайдер заслуговує на довіру.

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

Автопрогравання слайдів

Підписи до зображень

Безперервне відтворення слайдів

6 ефектів переходу

Sexy Slider чекає, коли ви відкриєте всю його міць та розкриєте потенціал.

З усіма цими дизайнами під мобільні пристрої та підтримкою сенсорних екранів приємно бачити JQuery слайдер, який не забув про настільні комп'ютери.

jQuery Image & Content Scroller w/ Lightbox підтримує введення з клавіатури та колесо миші, а також інші можливості:

Горизонтальна та вертикальна орієнтація

Текстові підписи всередині або зовні слайдера

Можливість встановити певну кількість видимих ​​за один раз слайдів

Вбудовані зображення, Flash, iframe, Ajax та інлайновий контент

Також у слайдері є вбудований lightbox. За бажанням jQuery Image & Content Scroller w/ Lightbox можна не запускати сам слайдер, а окремо запустити lightbox.

Більшість JQuery слайдерів мають свій дизайн. Ви можете налаштувати його під себе, але іноді просто хочеться, щоб все було всередині слайдера. До вашої уваги представляється Translucent.

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

6 різних стилів

4 ефекти переходів

2 переходи по свайпу

Настроювані кнопки та підписи

Як і інші, цей слайдер підтримує торкання, адаптивний та має апаратне прискорення. Translucent – ​​слайдер з мінімальним дизайном, який на чільне місце ставить сам контент.

Ви хочете зробити повноекранний сайт, що складається зі слайдів? Тоді вам потрібний FSS.

Насправді, за допомогою цього JQuery слайдера дуже легко створити повноекранний сайт-слайдер. Можливості:

Підтримка AJAX

Скроллбар

Підтримка технології deep linking

2 різних ефекти переходів

Також варто звернути на підтримку клавіатури та 11-ти сторінковий гайд. Проте справжнє враження викликає вага FSS, лише 5Кб.

Ще один приклад JQuery слайдера, що зосередився на стилях і який непогано справляється зі своєю роботою. Zozo Accordion є обов'язковим для тих, хто шукає хороший слайдер-акордіон з можливістю зміни стилів.

Ця красуня з CSS3 анімацією також має досить широкий набір функцій:

Горизонтальний та вертикальний акордеон

Семантичний HTML5 та SEO оптимізація

Підтримка дотиків, клавіатури та WAI-ARIA

Більше 10 скінів та 6 макетів

І багато іншого

У Zozo Accordion безкоштовна підтримка та постійні оновлення, а також всі функції, які ви хочете побачити в акордеоні JQuery.

jQuery Responsive OneByOne Slider Plugin більше схожий на просту анімацію, а не на слайдер. Замість відображення одного слайда за раз, цей екземпляр крок за кроком заповнює екран слайдами, поки в області не залишиться місця і тільки потім переходить до наступного слайду.

CSS3 анімація працює з-під Animate.css, вона легка, складається з кількох шарів і дружить із мобільними пристроями. Декілька функцій:

Існує також опція навігації за допомогою drag and drop. jQuery Responsive OneByOne Slider Plugin працює на основі каруселі Twitter Bootstrap.

Ні jQuery слайдер легше цього. Для роботи необхідно завантажити всього 3Кб слайдера, що робить Accordionza найлегшим слайдером типу акордеон.

Якщо вам не сподобалися три варіанти стилів, можете підправити HTML та CSS самостійно. Можливості:

Навігація з клавіатури

Легкі в налаштуванні ефекти та кнопки

Техніка прогресивного покращення – працює без JavaScript

Пам'ятайте, що Accordionza може відображати безліч варіантів змішаного контенту, що робить його дуже гнучким.

MightySlider справді потужний слайдер. Його можна використовувати не тільки як простий слайдер зображень, але і як повноекранний односпрямований слайдер з навігацією по пунктах меню. З його допомогою можна зробити чудовий односторінковий сайт.

Під капотом ви знайдете безліч опцій:

Підтримка клавіатури, мишки та торкань

CSS3 переходи з апаратним прискоренням

Чиста валідна розмітка та SEO оптимізація

Необмежена кількість слайдів, шари для підписів та ефекти до них

API дуже потужний та доброзичливий до розробників, що відкриває різні способи його використання. MightySlider це чудовий, прогресивний 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 слайдер і чому?

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

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

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

Головним об'єктом у нас буде viewport, тобто блок, в якому ми будемо бачити, як крутяться наші картинки, в ньому у нас буде slidewrapper, це буде нашим блоком, що містить у собі всі зображення, збудовані в одну лінію, і який буде змінювати свою позицію всередині самого viewport.


Далі, з боків усередині viewport, вертикально посередині, будуть розташовуватися кнопки назад і вперед, при натисканні на які ми також будемо змінювати позицію нашого slidewrapper щодо viewport, тим самим викликаючи ефект прогортання картинок. І, нарешті, останнім об'єктом будуть наші навігаційні кнопочки, що знаходяться в нижній частині viewport .


При натисканні на них, ми просто дивитимемося на порядковий номер цієї кнопочки і рухатимемо на потрібний нам слайд знову ж таки шляхом зміщення slidewrapper (зміщення буде проводитися через зміну css-властивості transform, значення якого буде постійно обчислюватися).

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

А тепер давайте ж писати! Насамперед відкриємо наш index-файл і пропишемо туди потрібну нам розмітку:

Як бачимо, нічого складного, block-for-slider служить саме блоком, в який наш слайдер буде поміщений, всередині нього вже сам viewport, в якому знаходиться наш slidewrapper, він же вкладений список, тут li є слайдами, а img – картинками усередині них. Прошу звернути увагу на те, що всі картинки повинні бути одного розміру або хоча б пропорцій, інакше слайдер буде криво виглядати, т.к. його розміри залежать від пропорцій зображення.

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

Почнемо з block-for-slider , це, повторюся, наш блок на сторінці, який ми відведемо під слайдер, його висота залежатиме від його ширини та від пропорцій зображення, т.к. viewport займає всю ширину block-for-slider, то й сам slide має таку ж ширину, а, відповідно, і картинка всередині нього змінює свою висоту залежно від ширини (пропорції зберігаються). Цей елемент на своїй сторінці я розташував горизонтально посередині, зверху відступив 100px, зробивши його позицію зручнішою для прикладу.

Елемент viewport, як уже говорилося, займає всю ширину нашого block-for-slider, він має властивість overflow:hidden, воно дозволить нам приховати нашу стрічку зображень, яка вилазить за рамки viewport.


Наступне css-властивість - user-select:none дозволяє позбутися синього виділення окремих елементів слайдера при численних кліках по кнопках.

Переходимо до slidewrapper , чому position:relative , а чи не absolute ? Все просто, т.к. якщо ми виберемо другий варіант, то при властивості viewport overflow:hidden нам не здасться рівно нічого, т.к. сам viewport не підлаштовуватиметься під висоту slidewrapper , через що матиме height:0 . Чому ширина має таке значення і навіщо ми її взагалі задаємо? Справа в тому, що наші слайди будуть мати ширину, рівну 100% від viewport, а щоб розставити їх у лінію, нам потрібно місце, де вони будуть стояти, таким чином ширина slidewrapper повинна дорівнювати 100% ширини viewport, помноженої на кількість слайдів (у моєму випадку на 4). Що стосується transition і transition-timing-function , то тут 1s означає, що зміна зміни положення slidewrapper буде відбуватися протягом 1 секунди і ми будемо це спостерігати, а ease-in-out - вид анімації, при якому вона спочатку йде повільно, прискорюється до середини, а потім знову сповільнюється, тут ви вже можете встановити значення на власний розсуд.

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

Далі ми стилізуємо наші слайди, їх ширина повинна дорівнювати ширині viewport, але т.к. вони знаходяться в slidewrapper , ширина якого дорівнює ширині viewport помноженої на кількість слайдів, то щоб отримати ширину viewport знову, нам потрібно 100% від ширини slidewrapper поділити на кількість слайдів (у моєму випадку, знову ж таки, на 4). Після цього перетворимо їх на малі елементи за допомогою display:inline і задамо обтікання зліва, додавши властивість float:left . Про list-style:none я можу сказати, що використовую його для того, щоб прибрати дефолтний маркер li, в більшості випадків є якимось стандартом.

З slide-img все просто, картинка буде займати всю ширину slide , slide підлаштується під її висоту, slidewrapper підлаштується під висоту slide , а висота viewport у свою чергу прийме значення висоти slidewrapper , таким чином висота нашого слайдера буде залежати від пропорцій зображення та розмірів , наданого під слайдер, про що я вже писав вище.

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

Відкриємо наш js-файл , в якому буде код слайдера, не забудьте підключити jQuery , т.к. писати ми будемо за допомогою цього фреймворку. Я, до речі, на момент написання статті використовую версію jQuery 3.1.0. Сам файл зі скриптом необхідно підключити наприкінці тега body , т.к. ми будемо працювати з DOM-елементами, які необхідно ініціалізувати насамперед.

Поки нам потрібно оголосити пару змінних, одна буде зберігати в собі номер слайда, який ми бачимо в певний момент часу в viewport , я назвав її slideNow , а друга буде зберігати кількість цих самих слайдів, це slideCount .

Змінною slideNow необхідно встановити початкове значення 1, т.к. при завантаженні сторінки ми, виходячи з нашої розмітки, будемо бачити перший слайд у viewport.

У slideCount ми помістимо кількість дочірніх елементів slidewrapper, тут все логічно.
Далі необхідно створити функцію, яка якраз і відповідатиме за перемикання слайдів справа наліво, оголосимо її:

Її ми викликатимемо в основному блоці нашого коду, до якого ми ще дістанемося, а поки що скажемо нашій функції, що їй потрібно робити:

Для початку ми перевіряємо, чи ми зараз на останньому слайді нашої стрічки? Для цього ми беремо кількість всіх наших слайдів за допомогою $("#slidewrapper").children().length і звіряємо його з номером нашого слайду, якщо вони виявляються рівними, це означає, що нам потрібно почати показувати стрічку заново, з 1 слайду , а значить змінюємо css-властивість transform у slidewrapper translate(0, 0) , таким чином зміщуючи його у вихідне положення, щоб у нашому полі зору виявився перший слайд, не забудемо також про -webkit і -ms для адекватного кроссбраузерного відображення (див. .довідник з css-властивостей). Після цього не забудемо оновити значення змінної slideNow, повідомивши їй, що в полі зору знаходиться слайд номер 1: slideNow = 1;

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

Якщо ж перша умова не виконується, то це говорить про те, що ми на даний момент не знаходимося ні на останньому слайді, ні на якомусь неіснуючому, а значить нам необхідно переключитися на наступний, зробимо ми це шляхом зміщення slidewrapper вліво на значення, рівне ширині viewport , зміщення знову відбуватиметься через знайоме нам властивість translate , значення якого дорівнюватиме "translate(" + translateWidth + "px, 0)" , де translateWidth – відстань, яку зміщується наш slidewrapper . До речі, оголосимо цю змінну на початку нашого коду:

Після переходу на наступний слайд скажемо нашому slideNow, що бачимо наступний за рахунком слайд: slideNow++;

На даний момент у деяких читачів може виникнути питання: чому ми не замінили $("#viewport").width() на якусь змінну, наприклад slideWidth, щоб завжди мати під рукою ширину нашого слайду? Відповідь дуже проста, якщо наш сайт адаптивний, то, відповідно, блок, виділений під слайдер теж адаптивний, тому можна зрозуміти, що при зміні розмірів ширини вікна без перезавантаження сторінки (наприклад, поворот телефону на бік), ширина viewport зміниться, а відповідно, зміниться і ширина одного слайда. У такому випадку наш slidewrapper зміщуватиметься на значення тієї ширини, яка була спочатку, а значить картинки будуть відображатися частинами або зовсім не відображатися у viewport. Записавши в нашу функцію $("#viewport").width() замість slideWidth ми змушуємо її при кожному перемиканні слайдів обчислювати ширину viewport, тим самим забезпечуючи при різкій зміні ширини екрана докрутку до потрібного нам слайда.

Втім, функцію ми написали, тепер необхідно викликати її через певний інтервал часу, інтервал ми теж можемо зберігати в змінній, щоб за бажання його змінити, поміняти лише одне значення коду:

Час js вказується в мілісекундах.

Тепер напишемо таку конструкцію:

Тут все простіше нікуди, ми через конструкцію $(document).ready(function()()) говоримо про те, що наступні дії необхідно виконувати після повного завантаження документа. Далі ми просто викликаємо функцію nextSlide з інтервалом, рівним slideInterval , з допомогою вбудованої функції setInterval .

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


Тим часом рухаємося далі, додамо до нашого слайдера таку функцію, як зупинка прокручування при наведенні курсору, для цього нам необхідно прописати в основному блоці коду (всередині конструкції $(document).ready(function() ())) таку річ:

Щоб почати аналізувати цей код, нам потрібно знати, що таке switchinterval . По-перше, це змінна, в якій зберігається періодичний виклик функції nextSlide, попросту кажучи, ми маємо цей рядок коду: setInterval(nextSlide, slideInterval); , перетворили на цю: switchInterval = setInterval(nextSlide, slideInterval); . Після цих маніпуляцій наш основний блок коду набув такого вигляду:

Тут я використовую подію hover, що означає «при наведенні», ця подія дозволяє відстежити той момент, коли я наводжу курсор на будь-який об'єкт, в даному випадку на viewport.

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

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

Ось і настав час додавати кнопки до нашого слайдера, почнемо з кнопок вперед-назад.

Насамперед розмітимо їх:

Спочатку дана розмітка може бути незрозумілою, скажу відразу, що обернув ці дві кнопки в один div із класом prev-next-btns просто для своєї зручності, ви можете цього не робити, результат від цього не зміниться, зараз ми додамо їм стилі і все стане ясно:

Спочатку ми позиціонуємо наші кнопки через position:absolute , тим самим будемо вільно управляти їх положенням усередині нашого viewport , далі вкажемо розміри цих кнопок і за допомогою border-radius закруглимо кути так, щоб ці кнопки перетворилися на круги. Колір їх буде білий, тобто #fff , а їх відступ від верхнього краю viewport дорівнюватиме половині висоти цього viewport мінус половина висоти самої кнопки (у моєму випадку 25px), таким чином ми зможемо їх розташувати вертикально по центру. Далі ми вкажемо, що при наведенні на них наш курсор зміниться на pointer і, зрештою, повідомимо нашим кнопкам окремо, що вони повинні відступати від своїх країв на 20px, щоб ми могли їх бачити так, як нам було б зручно.

Повторюся, що стилізувати елементи сторінки можна так, як хочете, я лише наводжу приклад тих стилів, які я вирішив використовувати.

Після стилізації наш слайдер має виглядати приблизно так:


Далі знову переходимо в наш js-файл, де ми опишемо роботу наших кнопок. Що ж, додамо ще одну функцію, вона показуватиме нам попередній слайд:

Вона називається prevSlide, викликатися вона буде тільки при натисканні на prev-btn. Спочатку робимо перевірку на те, чи знаходимося ми на 1-му слайді чи ні, тут ми також перевіряємо, чи не вийшов наш slideNow за межі реального діапазаону наших слайдів і, якщо якась з умов спрацює, перемістимося на останній слайд , Змістивши slidewrapper на потрібне нам значення. Це значення ми обчислимо за такою формулою: (ширина одного слайда)*(у слайдів – 1), усе це беремо зі знаком мінус, т.к. зміщуємо його вліво, виходить, що viewport тепер показуватиме нам останній слайд. Наприкінці цього блоку нам також треба сказати змінною slideNow, що зараз у нашому полі зору є останній слайд.

Якщо ж ми не знаходимося на першому слайді, то нам потрібно зміститися на 1 назад, для цього знову ж таки змінюємо властивість transform у slidewrapper. Формула така: (ширина одного слайду) * (номер поточного слайду - 2), все це знову ж таки беремо зі знаком мінус. Але чому ж -2, а не -1, нам потрібно переміститися саме на 1 слайд назад? Справа в тому, що якщо ми знаходимося, скажімо, на 2-му слайді, то змінна x властивості transform:translate(x,0) нашого slidewrapper вже дорівнює ширині одного слайду, якщо ми йому скажемо, що від номера поточного слайда потрібно відібрати 1 , то знову отримаємо одиницю, яку вже зміщений slidewrapper , тому потрібно буде зміщувати на 0 цих самих ширин viewport , отже на slideNow - 2.

Тепер нам залишилося внести в основний блок коду ці рядки:

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

Тепер додамо кнопки навігації по слайдах, знову повертаємось у розмітку:

Як бачимо, всередині viewport з'явився вкладений список, дамо йому ідентефікатор nav-btns, всередині нього li – наші кнопочки навігації, їм надамо клас slide-nav-btn, втім з розміткою можна і закінчити, приступаємо до стилів:

Блоку nav-btns , в якому знаходяться наші кнопочки, даємо властивість position:absolute , щоб він не розтягнув viewport по висоті, т.к. у slidewrapper властивість position:relative , ширину в 100% ми задаємо, щоб за допомогою text-align:center сцентрувати кнопки горизонтально щодо viewport , далі за допомогою властивості bottom даємо зрозуміти нашому блоку, що він від нижнього краю повинен знаходитися на відстані 20px.

З кнопками ми робимо те саме, що й зі слайдами, але при цьому тепер задаємо їм display: inline-block, т.к. при display:inline вони не реагують на width і height, т.к. знаходяться в абсолютно позиціонованому блоці. Колір зробимо білий і за допомогою вже знайомого нам border-radius надамо їм форму кола. При наведенні ними змінимо вигляд нашого курсору для звичного відображення.

А тепер приступаємо вже до jQuery - частини:
Для початку оголосимо змінну navBtnId, в якій зберігатиметься індекс натиснутої нами кнопки:

Тут ми при натисканні на нашому slide-nav-btn викликаємо функцію, яка в першу чергу присвоює змінній navBtnId індекс клікнутої кнопки, тобто її порядковий номер, тому що відлік починається з нуля, то якщо ми натискаємо на другу кнопку, то в navBtnId записується Значення 1. Далі ми робимо перевірку, де додаємо до порядкового номера кнопки одиницю, щоб отримати таке число, ніби відлік йшов не з 0, а з 1, порівнюємо це число з номером поточного слайду, якщо вони збігаються, то ми не будемо робити жодних процесів, то необхідний слайд вже у viewport .

Якщо ж потрібний нам слайд знаходиться не в полі зору viewport, то обчислимо відстань, на яку нам потрібно зрушити slidewrapper вліво, далі змінюємо значення css-властивості transform на translate (та сама відстань у пікселях, 0). Це ми вже робили не раз, тож питань виникнути не повинно. Наприкінці знову зберігаємо значення поточного слайда в змінну slideNow, це значення можна обчислити, додавши до індексу клікнутої кнопки одиницю.

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

Дякую за увагу!

Теги:

• jquery slider
• css
• css3 animation
• html

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

Єдина залежність плагіна - це jQuery, який ми повинні підключити насамперед:

Підключимо базові стилі.

Накатаємо html структуру слайдера.

Запускаємо слайдер із налаштуваннями за замовчуванням.

$(".slider").glide();

… або налаштовуємо його під себе

$(".slider").glide(( autoplay: 5000, arrows: "body", nav: "body" )));

Список доступних параметрів:

Для використання API запишіть glide в змінну.

Var glide = $(".slider").glide().data("api_glide");

Тепер вам доступні методи API.

Glide.jump(3, console.log("Wooo!"));

• .current() - Повернення номера поточного сайду
• .play() - Почати автопрокручування
• .pause() - Зупинити автопрокручування
• .next(callback) - Прогорнути слайдер вперед
• .prev(callback) - Прогорнути слайдер назад
• .jump(distance, callback) - Перейти на певний слайд
• .nav(target) - Прикріпити навігацію до певного елементу (наприклад: "body", ".class", "#id")
• .arrows(target) - Прикріпити стрілки до певного елементу (наприклад: "body", ".class", "#id")