Багатофункціональний адаптивний слайдер — Glide.js

32

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

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

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

Glide - Слайдер изображений

В слайдері Glide.js використані ефекти CSS3 переходів для сучасних браузерів для користувачів продовжують сидіти на стародавніх версіях, не підтримують нові функції CSS3, передбачено повернення до анімації JavaScript. Так що ніхто не буде ображений і побачить уявлення у тому вигляді, як задумав його розробник.
Для розробників, представлений список підтримуваних функцій зворотного виклику:

  • .play() – Старт автозапуску
  • .pause() – Пауза автозапуску
  • .next(callback — Один слайд вперед
  • .prev(callback) — Один слайд тому
  • .jump(distance, callback) — Перейти до поточного слайда
  • .current() — Повертає номер поточного слайда
  • .nav(target) — Додавання переходів (eq. ‘body’, ‘.class’, ‘#id’)
  • .arrows(target) — Додавання стрілки (eq. ‘body’, ‘.class’, ‘#id’)

Так само, списком, уявляю всі основні особливості скрипта:

  • Дуже легкий — 4,5 kb
  • Швидкі переходи CSS3
  • Адаптивний
  • Підтримка сенсорного управління
  • Навігація стрілками і через панель
  • Навігація за допомогою клавіатури
  • Автозапуск
  • Пауза при наведенні курсору миші
  • і багато іншого…

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

ДемоСкачать

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