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

 

Для реализации такого слайдера мы будем использовать PIGNOSE layerslider который является плагином jQuery для созданий карусели, также может применяться для генерации автоматической, с бесконечным циклом перемотки изображения слайдера с установленным эффектом параллакса. Также данный плагин имеет следующие полезные свойства:

  • Отображает миниатюру карусели внутри текущего слайда.
  • Панель управления, которая позволяет приостановить карусель.
  • Стрелки навигации и точки разбиения по страницам.
  • Размытые миниатюры.
  • Настраиваемая скорость анимации.
  • Позволяет сдвинуть карусель влево или вправо.

С полезными свойствами плагина мы ознакомились, так что давайте приступим к самому процессу создания нашего замечательного слайдера.

Шаг 1. HTML

Для того, чтобы начать работу над слайдером, необходимо включить следующие файлы JS & CSS в HTML-страницу.

Затем мы добавляем изображения с миниатюрами и элементы управления к данному слайдеру.

Разметка достаточно простая и не должна вызвать у вас трудностей. Так как стилей у нас не так много и служат только для демонстрации мы перейдем к следующему шагу.

Шаг 2. JS

Теперь нам необходимо инициализировать сам плагин к данной странице, для этого мы используем следующие правила:

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

В результате мы получили замечательный слайдер, который станет отличным дополнением к сайту и оживит его. Не забывайте подписываться на наши новости.

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

 

 

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