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

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

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

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

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

<link href="css/resize-slider.css" rel="stylesheet">
<script src="https://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>

Для красивого эффекта нужны красивые фотографии. Я возьму оные в одном из бесплатных фотобанков и подготовлю для работы. Размер картинок будет 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"
				}
			}
...
		}
	});
});

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree