Топ плагінів jQuery. Фоновий слайдер

36

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні ми познайомимося з ще одним jquery плагіном, що реалізує повноекранний фоновий jQuery слайдер фонових зображень.

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

Ну що ж, приступимо до роботи з фоновим слайдером jQuery. Отримаємо архів з плагіном на офіційній сторінці репозиторію. Там же можна знайти і інструкцію по його використанню. Підключимо необхідні файли jQuery слайдера з отриманого архіву.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent consequat sapien ut dui hendrerit imperdiet.
Morbi aliquam tristique rutrum.

Кожен слайд jQuery slider, як бачимо, встановлюється в якості фонового зображення (background-image) для кожного з блоків. Залишилося ініціалізувати плагін, звернувшись до методу rbtSlider(). Даний метод слайдера jQuery передбачає кілька можливих налаштувань:

height — висота слайдера

dots — показувати кількість слайдів точками

arrows — показувати стрілки вліво/вправо

auto — автосмена через задану кількість секунд

$(function(){
$(‘#slider’).rbtSlider({
‘height’: ‘100vh’,
‘dots’: true,
‘arrows’: true,
‘auto’: 3
});
});

В результаті ми отримаємо приблизно таку картину:

Топ плагинов jQuery. Фоновый слайдер

Ми отримали повноекранний фоновий jQuery слайдер з чудовими фоновими фотографіями. Відмінний ефект для сайтів фотографів або іміджевих сайтів.

Ну а в мене на сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!