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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

Из разметки нам потребуется всего один элемент — контейнер, в который и будет помещен фоновый jquery slider.

Для красивого эффекта нужны красивые фотографии. Я возьму оные в одном из бесплатных фотобанков и подготовлю для работы. Размер картинок будет 1920*1280 пикселей — этих размеров вполне хватит для качественного показа изображений на любых мониторах, фото при этом будут весить относительно немного. Все фотографии я положу в папку img.

Осталось инициализировать работу фонового слайдера jQuery, передав ему в качестве настройки объект image с параметрами картинок для альбомного и книжного размера окна браузера.

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

Метки:

Похожие статьи:

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

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

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

  1. Александр

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

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

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

      • Александр

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

  2. Александр

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree