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

Дата публикации: 2017-03-08

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

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

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

<link href="css/resize-slider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/resize-slider.js"></script>

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

<div id="resizeSlider"></div>

1	<div id="resizeSlider"></div>

Для красивого эффекта нужны красивые фотографии. Я возьму оные в одном из бесплатных фотобанков и подготовлю для работы. Размер картинок будет 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" : "center bottom"
				},
				"portrait":{
					"url"      : "url(img/2.jpg)",
					"size"     : "cover",
					"repeat"   : "no-repeat",
					"position" : "left center"
				}
			}
...
		}
	});
});

$(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" : "center bottom"

"portrait":{

"url" : "url(img/2.jpg)",

"size" : "cover",

"repeat" : "no-repeat",

"position" : "left center"

}

...

}

});

Обратите внимание на то, что в зависимости от формата окна браузера (книжный или альбомный) мы не только можем поменять CSS опции изображения, но и само изображение, если это Вам конечно нужно.

Собственно, это все. Если теперь заглянуть в браузер, то мы увидим первое фоновое изображение на все окно браузера. После непродолжительного времени (3,5 секунды по умолчанию) первое фото сменится вторым и т.д. Наш фоновый слайдер jQuery работает.

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

Метки: jquery