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

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

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

</div>

Praesent consequat sapien ut dui hendrerit imperdiet.

</div>

Morbi aliquam tristique rutrum.

</div>

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

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

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

arrows — показывать стрелки влево/вправо

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

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

$(function(){

$('#slider').rbtSlider({

'height': '100vh',

'dots': true,

'arrows': true,

'auto': 3

});

В результате мы получим примерно такую картину:

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

Мы получили полноэкранный фоновый слайдер jQuery с великолепными фоновыми фотографиями. Отличный эффект для сайтов фотографов или имиджевых сайтов.

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

Метки: jquery