Огляд слайдера bxSlider

Сьогодні пропоную вам огляд, на мою думку, одного із найкращих слайдерів під назвою bxSlider. Цей слайдер містить повний набір можливостей, до того ж він адаптивний та його легко підключити до проекту. Завантажити слайдер можна на офіційному сайті bxslider.com Але я завжди намагаюсь завантажувати такого роду скрипти на GitHub. Частіше саме на GitHub скрипти містять останні допрацювання та правки. Лінк для завантаження bxSlider на GitHub.

Детальніше які можливості має цей слайдер:
  • повністю адаптивний, маштабується під будь-які розширення дисплеїв;
  • горизонтальний, вертикальний та fade режими;
  • може відображати зображення, відео та html контент;
  • підтримує функції swipe/touch;
  • використовує CSS transitions для анімації слайдів;
  • API;
  • достатьно малий розмір файлів, досить легко стилізувати та підключити до проекту;
  • підтримка браузерами Firefox, Chrome, Safari, iOS, Android, Ie7+;
  • і на кінець велика кількість опцій налаштування;

Підключення слайдера bxSlider

Підключення bxSlider нічим не відрізняється від підключення йому подібних скриптів, слайдерів. Завантажте архів із сайта, в ньому є все необхідне для підключення та роботи. Окрім цього там є ще декілька додаткових файлів jquery.easing.1.3.js та jquery.fitvids.js, але немає бібліотеки jQuery. Її можна завантажити на сайті jQuery.com в розділі Download. Бібліотеку jQuery я підключу локально.

Файл jquery.bxslider.min.js беремо із архіву. Це упакована версія скрипта для зменшення розміру. Усі налаштування скриптів я намагаюсь тримати в одному місці, а саме у файлі script.js. Назва в нього може бути довільна.

Окрім цього в head ми підключаємо файл стилів bxslider.css для слайдера. Підключення цього файла не є обовязковим. Структура цього файла досить проста аби розібратись в ній та внести певні правки. Та й стилі по замовчуванню мінімальні. То ж з власного досвіду рекомендую завжди його підключити.

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

Слайдер bxSlider підключений та готовий до роботи.

Html розмітка для слайдера bxSlider

Розмітка проста і зрозуміла. Це є звичайний UL список. Де LI це є окремі слайди. Як я раніше говорив саме у LI можна розміщувати зображення, відео та довільний html-контент. Сам список UL повинне мати клас із довільним ім’ям:

Ініціалізація скрипта bxSlider

У створеному раніше файлі script.js проводемо ініціалізацію скрипта. Варто зазначити , що строка ініціалізації слайдера повинна бути заключена в “обгортку”, в іншому випадку слайдер не буде працювати.

Можна глянути на результат який в нас получився.

Слайдер bxSlider

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

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

Висновик

Проста розмітка, використання довільного імені класу, автоматичне генерування HTML-елементів слайдера, велика кількість налаштувань, хороші ефекти, простота підключення. Сміло рекомендую його вам, як мегафунціональний слайдер для більшості ваших проектів.

Коментарі (1)

Вам вже є 18 років?

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

Мені немає 18 Мені вже є 18