Топ плагинов 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:

Комментарии (4)

  1. Александр

    Здравствуйте, а как можно сделать что бы фоновый слайдер был на весь экран!

    • Андрей Кудлай

      Здравствуйте, Александр. Ради интереса скачал исходники, проверил — слайдер показывается на весь экран.

      • Александр

        как сделать так, что бы слайдер был основным фоном на весь сайт. У меня длина планируемого сайта 2000px, а слайд только размещается на верхней части сайта, а если проскролить вниз, то там пустота

  2. Александр

    У меня длина планируемого сайта 4000px, а слайд размещается в верхней части сайта. Как сделать так, что бы он был растянут во всю длину сайта

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

Ваш 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