Слайдер фоновых изображений Vegas

VEGAS BACKGROUND SLIDESHOW — это плагин jQuery или Zepto для анимации фоновых изображений блоков или всей страницы. Он имеет массу настроек и эффектов анимации.

В этой заметке рассмотрим его поподробнее.

1. Установка слайдера Vegas:

Подключаем плагин jQuery:

или Zepto:

Скачиваем плагин Vegas:

Скачать с Atuin Скачать с GitHub

Или скачать по отдельности (если вы не используете слои):

Подключаем CSS плагина:

и его JS файл:

Применяем слайдер к body или другому элементу (код должен находиться ниже блока слайдера):

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

Результат:

Нажмите кнопку "запустить"

2. Параметры и настройки слайдера:

Название По умолчанию Описание
slide
0 Номер начального слайда.
preload
false Предварительная загрузка изображений и видео при запуске.
preload­Image
false Предварительная загрузка изображений при запуске.
preload должен быть false.
preload­Video
false Предварительная загрузка видео при запуске.
preload должен быть false .
timer
true Показывать или нет таймер.
Класс для таймера: .vegas-timer-progress.
overlay
false Показывать или нет слои. Может быть true false или путь до графиеского файла (слоя).
Подробнее в "Наложение слоев".
autoplay
true Автоматически запустить показ слайдеров.
loop
true Показывать сладеры по кругу.
shuffle
false Показывать слайдеры в случайном порядке.
delay
5000 Время показа слайда в миллисекундах.
cover
true true - изображение слайда масштабируется в соответствии с контейнером.
false - изображение отображается полностью.
repeat - изображение повторяется заполняя контейнер.
color
- Цвет фона слайдера.
align
center Горизонтальное выравнивание изображения на слайде.
Может быть center top right bottom left или процент.
valign
center Вертикальное выравнивание изображения на слайде.
Может быть center top right bottom left или процент.
transition
fade Переход между слайдами. Может быть названием стиля, random или массивом переходов.
Подробнее в "Переходные эффекты".
transition­Duration
1000 Длительность перехода в миллисекундах. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда.
firstTransition
- Переход для первого воспроизводимого слайда. Может быть названием стиля, random или массивом переходов.
Подробнее в "Переходные эффекты".
firstTransition­Duration
- Длительность перехода в миллисекундах для первого воспроизводимого слайда. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда.
animation
- Переход между слайдами. Может быть названием стиля, random или массивом анимаций.
Подробнее в "Анимационные эффекты".
animation­Duration
auto Длительность анимации в миллисекундах. Может быть auto, в этом случае продолжительность анимации будет равна длительности показа слайда.
slidesToKeep
1 Количество слайдов, которые нужно оставить на заднем плане, прежде чем удалять их.
slides
- Массив со слайдами.
Подробнее в: "Параметры и настройки слайдов".
Пример:
Результат:

Нажмите кнопку "запустить"

3. Параметры и настройки слайдов:

Название По умолчанию Описание
src
- Путь до изображений.
video
- Путь до видео. Может быть строкой или массивом.
Подробнее в "Видео".
delay
5000 Задержка между слайдами в миллисекундах.
cover
true true - фоновое изображение масштабируется до размера контейнера..
false - фоновое изображение отображается полностью.
color
- Цвет фона слайдера.
align
center Горизонтальное выравнивание изображения на слайде.
Может быть center top right bottom left или процент.
valign
center Вертикальное выравнивание изображения на слайде.
Может быть center top right bottom left или процент.
transition
fade Переход между слайдами. Может быть названием стиля, random или массивом переходов.
Подробнее в "Переходные эффекты".
transition­Duration
1000 Длительность перехода в миллисекундах. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда.
animation
- Переход между слайдами. Может быть названием стиля, random или массивом анимаций.
Подробнее в "Анимационные эффекты".
animation­Duration
auto Длительность анимации в миллисекундах. Может быть auto, в этом случае продолжительность анимации будет равна длительности показа слайда.
Пример:
Результат:

Нажмите кнопку "запустить"

4. События:

VEGAS предоставляет функции обратного вызова и триггеры событий при инициализации, воспроизведении, паузе и смене слайдов.

Название Событие Описание
init
vegasinit Функция вызывается, когда Vegas применяется к элементу.
play
vegasplay Функция вызывается, когда Vegas начинает воспроизводить слайд-шоу.
pause
vegaspause Функция вызывается, когда Vegas приостанавливает показ слайдов.
walk
vegaswalk Функция вызывается, когда меняется слайд.
end
vegasend Функция вызывается, когда слайд-шоу завершено, если loop: false.
Пример:

Слайдер и информационный блок под ним:

Второй информационный блок под слайдером:

Результат:

Нажмите кнопку "запустить"

5. Наложение слоев:

Для того чтобы скрыть артефакты на масштабируемых слайдах, в Vegas'е можно применять слои.

Пример:
Результат:

Нажмите кнопку "запустить"

Слои:

Класс для слоев: .vegas-overlay

Путь до слоя: /js/vegas/overlays/номер.png

01
02
03
04
05
06
07
08
09

6. Видео:

Фоновое видео может не работать должным образом в некоторых браузерах.

Название По умолчанию Описание
video.src
[] Массив с видео файлами
video.loop
true Проигрывать видео по кругу
video.mute
true Отключить звука видео
Пример:

Image src (img-video.jpg) требуется для видео слайдов как запасной вариант, когда видео не может быть воспроизведено. Вместо этого будет отображаться запасное изображение.

Результат:

Нажмите кнопку "запустить"

По умолчанию VEGAS исключает мобильные устройства.

Переопределите эту функцию, если необходимо.

7. Переходные эффекты слайдов:

VEGAS использует CSS3 свойство transitions

Доступные варианты:
  • fade
  • fade2
  • slideLeft
  • slideLeft2
  • slideRight
  • slideRight2
  • slideUp
  • slideUp2
  • slideDown
  • slideDown2
  • zoomIn
  • zoomIn2
  • zoomOut
  • zoomOut2
  • swirlLeft
  • swirlLeft2
  • swirlRight
  • swirlRight2
  • burn
  • burn2
  • blur
  • blur2
  • flash
  • flash2
Пример:

Продолжительность перехода задается в миллисекундах с помощью параметра transitionDuration.

Случайные переходы:

Переход между слайдами может быть установлен случайным образом. Можно определить список конкретных переходов с помощью массива.

Собственные переходы:

Можно создавать свои собственные переходы. Переход имеет 3 класса. Чтобы быть распознанными, они должны иметь префикс .vegas-transition

.vegas-transition-{name} - это начальное состояние, применяемое при создании слайда.

.vegas-transition-{name}-in применяется, когда слайд появляется.

.vegas-transition-{name}-out применяется, когда слайд исчезает.

Лучше предоставлять 2 версии, например:

И в настройках слайдера указать: transition: 'blackwhite' или transition: 'blackwhite2'

Нажмите кнопку "запустить"

8. Анимационные эффекты слайдов:

VEGAS использует CSS3 свойство animations

Доступные варианты:
  • kenburns
  • kenburnsUp
  • kenburnsDown
  • kenburnsRight
  • kenburnsLeft
  • kenburnsUpLeft
  • kenburnsUpRight
  • kenburnsDownLeft
  • kenburnsDownRight
  • random
Пример:

Продолжительность анимации задается в миллисекундах с помощью параметра animationDuration.

Случайные переходы:

Анимация между слайдами может быть установлена случайным образом. Можно определить список конкретных анимаций с помощью массива.

Собственные анимации:

Можно создать свои собственные анимации, которые должны быть названы .vegas-animation-{name}, например:

И в настройках слайдера указать: animation: 'moves'

Нажмите кнопку "запустить"

9. Методы:

VEGAS предоставляет методы, позволяющие полностью контролировать слайд-шоу и его параметры.

Метод Код Описание
play
Старт слайд-шоу.
pause
Пауза слайд-шоу.
toggle
Пауза или старт слайд-шоу.
next
Перейти к следующему слайду.
previous
Перейти к предыдущему слайду.
jump
Перейти на определенный слайд.
shuffle
Перемешать массив слайдов.
playing
Вернуть, если слайд-шоу воспроизводится / приостанавливается
current
Вернуть индекс текущего слайда.
destroy
Удалить Vegas из элемента.
Пример:
Управление настройками:

Параметры и настройки могут быть изменены на лету.

Получение настроек: Установка настроек:

10. Установка в XSL шаблон HostCMS:

Так как я в основном работаю с этой CMS, решил добавить XSL шаблон для вывода слайдов через информационную систему.

Возможно кому-нибудь пригодится.

11. Заключение:

Сайт разработчиков: jaysalvat

Перевод и примеры: atuin

Фотографии: kellepics

Смотрите также:

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

Ваш комментарий отправлен!

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

  • Volonteer:

    Привет, отличный слайдер, а как бы сделать к нему элементы управления в виде точек (dots) , ну как обычно на слайдерах делается. Нажатие на конкретную точку — переход на этот слайд. Если не трудно, приведите код пожалуйста (css не нужно, достаточно JS). Заранее спасибо!

    Ответить
    • Alexander:

      Автоматом наверное не сделать.
      Можно вручную нарисовать любые точки и прописать на них

      $(".example").vegas('jump', 3);

      — прыгнет на 3тий слайд

      Ответить
  • Олег:

    отличный слайдер, спасибо

    Ответить