Топ плагінів jQuery. Фоновий слайдер для зміни картинок

2

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

З плагінами такого роду (фоновий jQuery слайдер) мені доводилося мати справу неодноразово, тому з упевненістю можу сказати, що сьогоднішній плагін — один з кращих в своєму роді. Ну що ж, перейдемо в репозиторій GitHub і завантажити його (також можете взяти його файли з додаткових матеріалів до статті).

Тепер підключимо необхідні для роботи jquery слайдера файли:

З розмітки нам буде потрібно всього один елемент — контейнер, в який буде поміщений фоновий jquery slider.

Для гарного ефекту потрібні красиві фотографії. Я візьму оні в одному з безкоштовних фотобанків і підготую для роботи. Розмір картинок буде 1920*1280 пікселів — цих розмірів цілком вистачить для якісного показу зображень на будь-яких моніторах, фото при цьому будуть важити відносно небагато. Всі фотографії я покладу в папку img.

Залишилося ініціалізувати роботу фонового слайдера jQuery, передавши йому в якості настройки об’єкт image з параметрами картинок для альбомного і книжкового розміру вікна браузера.

$(function(){
$(«#resizeSlider»).resizeSlider({
«image»:{
«presentacion»:{
«landscape»:{
«url» : «url(img/1.jpg)»,
«size» : «cover»,
«repeat» : «no-repeat»,
«position» : «center top»
},
«portrait»:{
«url» : «url(img/1.jpg)»,
«size» : «cover»,
«repeat» : «no-repeat»,
«position» : «right center»
}
},
«presentacion 1»:{
«landscape»:{
«url» : «url(img/2.jpg)»,
«size» : «cover»,
«repeat» : «no-repeat»,
«position» : «bottom center»
},
«portrait»:{
«url» : «url(img/2.jpg)»,
«size» : «cover»,
«repeat» : «no-repeat»,
«position» : «left center»
}
}

}
});
});

Зверніть увагу на те, що в залежності від формату вікна браузера (книжкова або альбомний) ми не тільки можемо поміняти CSS опції зображення, але і саме зображення, якщо це Вам, звісно, потрібно.

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

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