Современный дизайн сайтов стал весьма прагматичным, появились новые возможности для реализации задумок на сайте. В последнее время стал весьма популярный среди разработчиков эффект параллакса, это не удивительно, мы сами уделяем ему много уроков и статьей по созданию эффектов на нем, ведь эта тенденция современного дизайна. Заказчики так и просят создавать сайты с применением такого эффекта, но что делать если у Вас уже готовый дизайн, но вы хотели добавить какой-нибудь эффект параллакса к себе на сайт.

К примеру универсальный автоматический слайдер, который будет содержать не только текст, картинки но и видео-материалы. В данном уроке мы рассмотрим как создать такой слайдер. И так приступим.

Шаг 1. HTML

Первым шагом будет подключение скриптов, все файлы надо разместить между тегами head и /head:

Затем нам надо создать разметку, для каждого слайда мы будем использовать отдельный контейнер, в котором будет содержаться все изображения к определенному слайду, и подписи, к примеру приводим разметку одного контейнера:

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

Шаг 2. CSS

Все стили слайдера находятся в файле setting.css, в нем мы указываем порядок размер изображений и миниатюр. Для начала мы создадим индикатор загрузки слайдера:

Затем нам необходимо указать параметры вывода цветных изображений, во время автоматической перемотки слайдера:

После этого создаем правила для черно-белой версии:

Фон слайдера задается при помощи таких простых правил:

Все остальные стили достаточно просты и понятны, останавливаться на них не стоит. Перейдем к следующему шагу.

Шаг 3. jQuery

Данный слайдер весьма удобен, и поддерживает последние нововведения в дизайне и не только:

  • Анимация с помощью CSS с FallBack для JQuery.
  • Дополнительный эффект параллакса.
  • Неограниченное количество слайдов.
  • iPhone и Android сенсорное управление включено.
  • JQuery бесплатный плагин.
  • Настраиваемый 100% через плагин, Параметры / CSS / HTML.
  • Простая установка на вашем сайте.
  • Vimeo и Youtube Поддерживаемый.

Для активации планига нам необходимо разместить следующий фрагмент кода в файле index.html

Вот и все. Готово!

Читайте также: