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

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

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

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

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

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

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

<div class="slider" id="slider">
	<div class="slItems">
		<div class="slItem" style="background-image: url('img/1.jpg');">
			<div class="slText">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</div>
		</div>
		<div class="slItem" style="background-image: url('img/2.jpg');">
			<div class="slText">
				Praesent consequat sapien ut dui hendrerit imperdiet.  
			</div>
		</div>
		<div class="slItem" style="background-image: url('img/3.jpg');">
			<div class="slText">
				Morbi aliquam tristique rutrum. 
			</div>
		</div>
	</div>
</div>

Каждый слайд 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 вы можете узнать из наших уроков или курса. Удачи!

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

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

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

Метки:

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

Комментарии 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