Топ плагинов 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 предполагает несколько возможных настроек:

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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