1. Установка слайдера Vegas:
Подключаем плагин jQuery:
|
1 |
<script src="http://code.jquery.com/jquery.min.js"></script> |
или Zepto:
|
1 |
<script src="http://zeptojs.com/zepto.min.js"></script> |
Скачиваем плагин Vegas:
Скачать с Atuin Скачать с GitHub
Или скачать по отдельности (если вы не используете слои):
- Скачать: vegas.css
- Скачать: vegas.min.css
- Скачать: vegas.js
- Скачать: vegas.min.js
Подключаем CSS плагина:
|
1 |
<link rel="stylesheet" href="/js/vegas/vegas.min.css"> |
и его JS файл:
|
1 |
<script src="/js/vegas/vegas.min.js"></script> |
Применяем слайдер к body или другому элементу (код должен находиться ниже блока слайдера):
|
1 |
<div class="example" style="height:400px"></div> |
|
1 2 3 4 5 6 7 8 9 10 |
$(".example").vegas({ slides: [ { src: "/img-1.jpg" }, { src: "/img-2.jpg" }, { src: "/img-3.jpg" }, { src: "/img-4.jpg" }, { src: "/img-5.jpg" }, { src: "/img-6.jpg" } ] }); |
Если это не задано настройками, слайдер включится автоматически. Но для того чтобы все примеры не крутились сами по себе, я добавил кнопки запуска и остановки, а также вариант полноэкранного просмотра
Результат:
Нажмите кнопку "запустить"
2. Параметры и настройки слайдера:
| Название | По умолчанию | Описание |
|---|---|---|
slide |
0 | Номер начального слайда. |
preload |
false | Предварительная загрузка изображений и видео при запуске. |
preloadImage |
false | Предварительная загрузка изображений при запуске. preload должен быть false. |
preloadVideo |
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 или массивом переходов.
Подробнее в "Переходные эффекты". |
transitionDuration |
1000 | Длительность перехода в миллисекундах. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда. |
firstTransition |
- | Переход для первого воспроизводимого слайда. Может быть названием стиля, random или массивом переходов.
Подробнее в "Переходные эффекты". |
firstTransitionDuration |
- | Длительность перехода в миллисекундах для первого воспроизводимого слайда. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда. |
animation |
- | Переход между слайдами. Может быть названием стиля, random или массивом анимаций.
Подробнее в "Анимационные эффекты". |
animationDuration |
auto | Длительность анимации в миллисекундах. Может быть auto, в этом случае продолжительность анимации будет равна длительности показа слайда. |
slidesToKeep |
1 | Количество слайдов, которые нужно оставить на заднем плане, прежде чем удалять их. |
slides |
- | Массив со слайдами.
Подробнее в: "Параметры и настройки слайдов". |
Пример:
|
1 |
<div class="example" style="height:400px"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(".example").vegas({ delay: 4000, timer: false, firstTransition: 'fade', firstTransitionDuration: 5000, transition: 'zoomOut', transitionDuration: 2000, slides: [ { src: "/img-1.jpg" }, { src: "/img-2.jpg" }, { src: "/img-3.jpg" }, { src: "/img-4.jpg" }, { src: "/img-5.jpg" }, { src: "/img-6.jpg" } ] }); |
Результат:
Нажмите кнопку "запустить"
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 или массивом переходов.
Подробнее в "Переходные эффекты". |
transitionDuration |
1000 | Длительность перехода в миллисекундах. Может быть auto, в этом случае продолжительность перехода будет равна длительности показа слайда. |
animation |
- | Переход между слайдами. Может быть названием стиля, random или массивом анимаций.
Подробнее в "Анимационные эффекты". |
animationDuration |
auto | Длительность анимации в миллисекундах. Может быть auto, в этом случае продолжительность анимации будет равна длительности показа слайда. |
Пример:
|
1 |
<div class="example" style="height:400px"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(".example").vegas({ delay: 3000, timer: false, slides: [ { src: "/img-1.jpg", animation: "kenburnsUpLeft" }, { src: "/img-2.jpg", transition: "fade2" }, { src: "/img-3.jpg", animation: "kenburnsDownLeft" }, { src: "/img-4.jpg", transition: "swirlLeft" }, { src: "/img-5.jpg", animation: "kenburnsLeft" }, { src: "/img-6.jpg", transition: "swirlRight2" } ] }); |
Результат:
Нажмите кнопку "запустить"
4. События:
VEGAS предоставляет функции обратного вызова и триггеры событий при инициализации, воспроизведении, паузе и смене слайдов.
| Название | Событие | Описание |
|---|---|---|
init |
vegasinit | Функция вызывается, когда Vegas применяется к элементу. |
play |
vegasplay | Функция вызывается, когда Vegas начинает воспроизводить слайд-шоу. |
pause |
vegaspause | Функция вызывается, когда Vegas приостанавливает показ слайдов. |
walk |
vegaswalk | Функция вызывается, когда меняется слайд. |
end |
vegasend | Функция вызывается, когда слайд-шоу завершено, если loop: false. |
Пример:
Слайдер и информационный блок под ним:
|
1 2 |
<div class="example" style="height:400px"></div> <div class="example-data"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(".example").vegas({ autoplay: false, delay: 4000, transition: 'zoomOut', transitionDuration: 2000, slides: [ { src: "/img-1.jpg" }, { src: "/img-2.jpg" }, { src: "/img-3.jpg" }, { src: "/img-4.jpg" }, { src: "/img-5.jpg" }, { src: "/img-6.jpg" } ], pause: function () { $(".example-data").text("Слайдер остановлен"); }, walk: function (index, slideSettings) { $(".example-data").text("Проигрывается слайдер: " + index + ", фото: " + slideSettings.src); } }); |
Второй информационный блок под слайдером:
|
1 |
<div class="example-data-2"></div> |
|
1 2 3 4 5 6 7 8 9 |
$(".example").on('vegasinit', function () { $(".example-data-2").text("Слайдер загружен"); }); $(".example").on('vegaspause', function (e, index, slideSettings) { $(".example-data-2").text("Пауза на слайдере: " + index); }); $(".example").on('vegaswalk', function (e, index, slideSettings) { $(".example-data-2").text("Проигрывается слайдер: " + index); }); |
Результат:
Нажмите кнопку "запустить"
5. Наложение слоев:
Для того чтобы скрыть артефакты на масштабируемых слайдах, в Vegas'е можно применять слои.
Пример:
|
1 |
<div class="example" style="height:400px"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(".example").vegas({ delay: 4000, transition: 'zoomOut', slides: [ { src: "/img-1.jpg" }, { src: "/img-2.jpg" }, { src: "/img-3.jpg" }, { src: "/img-4.jpg" }, { src: "/img-5.jpg" }, { src: "/img-6.jpg" } ], overlay: '/js/vegas/overlays/08.png' }); |
Результат:
Нажмите кнопку "запустить"
Слои:
Класс для слоев: .vegas-overlay
Путь до слоя: /js/vegas/overlays/номер.png
6. Видео:
Фоновое видео может не работать должным образом в некоторых браузерах.
| Название | По умолчанию | Описание |
|---|---|---|
video.src |
[] | Массив с видео файлами |
video.loop |
true | Проигрывать видео по кругу |
video.mute |
true | Отключить звука видео |
Пример:
|
1 |
<div class="example" style="height:400px"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(".example").vegas({ slides: [ { src: '/img-1.jpg' }, { src: '/img-video.jpg', video: { src: [ '/video.mp4', '/video.webm', '/video.ogv' ], loop: false, mute: true } }, { src: '/img-2.jpg' } ] }); |
Image src (img-video.jpg) требуется для видео слайдов как запасной вариант, когда видео не может быть воспроизведено. Вместо этого будет отображаться запасное изображение.
Результат:
Нажмите кнопку "запустить"
По умолчанию VEGAS исключает мобильные устройства.
|
1 2 3 4 |
$.vegas.isVideoCompatible = function () { var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i; return !devices.test(navigator.userAgent); } |
Переопределите эту функцию, если необходимо.
7. Переходные эффекты слайдов:
VEGAS использует CSS3 свойство transitions
Доступные варианты:
Пример:
|
1 2 3 4 5 6 7 8 |
$(".example").vegas({ slides: [ { src: '/img-1.jpg' }, { src: '/img-2.jpg' }, { src: '/img-3.jpg' } ], transition: 'fade' }); |
Продолжительность перехода задается в миллисекундах с помощью параметра transitionDuration.
Случайные переходы:
Переход между слайдами может быть установлен случайным образом. Можно определить список конкретных переходов с помощью массива.
|
1 2 3 4 5 6 7 8 |
$(".example").vegas({ slides: [ { src: '/img-1.jpg' }, { src: '/img-2.jpg' }, { src: '/img-3.jpg' } ], transition: [ 'fade', 'zoomOut', 'swirlLeft' ] }); |
Собственные переходы:
Можно создавать свои собственные переходы. Переход имеет 3 класса. Чтобы быть распознанными, они должны иметь префикс .vegas-transition
.vegas-transition-{name} - это начальное состояние, применяемое при создании слайда.
.vegas-transition-{name}-in применяется, когда слайд появляется.
.vegas-transition-{name}-out применяется, когда слайд исчезает.
Лучше предоставлять 2 версии, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.vegas-transition-blackwhite, .vegas-transition-blackwhite2 { -webkit-filter: grayscale(0); filter: grayscale(0); } .vegas-transition-blackwhite-in, .vegas-transition-blackwhite2-in { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .vegas-transition-blackwhite2-out { -webkit-filter: grayscale(0); filter: grayscale(0); } |
И в настройках слайдера указать: transition: 'blackwhite' или transition: 'blackwhite2'
Нажмите кнопку "запустить"
8. Анимационные эффекты слайдов:
VEGAS использует CSS3 свойство animations
Доступные варианты:
Пример:
|
1 2 3 4 5 6 7 8 |
$(".example").vegas({ slides: [ { src: '/img-1.jpg' }, { src: '/img-2.jpg' }, { src: '/img-3.jpg' } ], animation: 'kenburns' }); |
Продолжительность анимации задается в миллисекундах с помощью параметра animationDuration.
Случайные переходы:
Анимация между слайдами может быть установлена случайным образом. Можно определить список конкретных анимаций с помощью массива.
|
1 2 3 4 5 6 7 8 |
$(".example").vegas({ slides: [ { src: '/img-1.jpg' }, { src: '/img-2.jpg' }, { src: '/img-3.jpg' } ], animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ] }); |
Собственные анимации:
Можно создать свои собственные анимации, которые должны быть названы .vegas-animation-{name}, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.vegas-animation-moves { animation: moves ease-out; } @keyframes moves { 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.6) rotate(10deg); } 75% { transform: scale(1.6) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } } |
И в настройках слайдера указать: animation: 'moves'
Нажмите кнопку "запустить"
9. Методы:
VEGAS предоставляет методы, позволяющие полностью контролировать слайд-шоу и его параметры.
| Метод | Код | Описание | ||
|---|---|---|---|---|
play |
|
Старт слайд-шоу. | ||
pause |
|
Пауза слайд-шоу. | ||
toggle |
|
Пауза или старт слайд-шоу. | ||
next |
|
Перейти к следующему слайду. | ||
previous |
|
Перейти к предыдущему слайду. | ||
jump |
|
Перейти на определенный слайд. | ||
shuffle |
|
Перемешать массив слайдов. | ||
playing |
|
Вернуть, если слайд-шоу воспроизводится / приостанавливается | ||
current |
|
Вернуть индекс текущего слайда. | ||
destroy |
|
Удалить Vegas из элемента. |
Пример:
|
1 2 3 |
$('a#pause').on('click', function () { $(".example").vegas('pause'); }); |
Управление настройками:
Параметры и настройки могут быть изменены на лету.
Получение настроек:|
1 2 |
var transition = $(".example").vegas('options', 'transition'); var slides = $(".example").vegas('options', 'slides'); |
|
1 2 |
$(".example").vegas('options', 'transition', 'fade'); $(".example").vegas('options', 'slides', [ ... ]); |
10. Установка в XSL шаблон HostCMS:
Так как я в основном работаю с этой CMS, решил добавить XSL шаблон для вывода слайдов через информационную систему.
Возможно кому-нибудь пригодится.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<xsl:template match="/informationsystem"> <div class="example" style="height:400px"></div> <script> <xsl:text> $(".example").vegas({ slides: [ </xsl:text> <xsl:apply-templates select="informationsystem_item"/> <xsl:text> ] }); </xsl:text> </script> </xsl:template> <xsl:template match="informationsystem_item"> { src: "<xsl:value-of disable-output-escaping="yes" select="dir"/><xsl:value-of disable-output-escaping="yes" select="image_large"/>" }<xsl:if test="position() != last()"><xsl:text>,</xsl:text></xsl:if> </xsl:template> |
11. Заключение:
Сайт разработчиков: jaysalvat
Перевод и примеры: atuin
Фотографии: kellepics
Здраствуйте! Слайдер супер. Можно его адаптивным сделать? Чтобы всех устроиствах адаптивно сделать можно?
Он и есть адаптивный и на всех экранах правильно отображается.
Только этот слайдер задуман как фоновый, что подразумевает обрезку фото в зависимости от контента внутри. Если эту обрезку нужно минимизировать или убрать, можно использовать для слайдера свойство aspect-ratio для соотношения сторон вместо указания конкретной высоты.
Добрый вечер!
Друзья помогите пожалуйста
Я не могу подключить и как там написать код
Александр здравствуйте! Классный слайдер!
Подскажите есть ли возможность прикрепить текстовый блок к каждому слайдеру?
Там можно сделать событиями тексты, например, если проигрывается слайд 1, то мы делаем видимым какой то блок и прячем остальные и тоже самое с слайдом 2,
Но изначально он идет как фоновый, а не информационный
Добрый день. Прошу подсказки : Слайдер не запускается при slide=0; и запускается при slide=1. При этом останавливается на последнем слайде при loop=true. Какие настройки изменить?
А можно посмотреть весь код подключения?
slide=0 и loop=true - это настройка по умолчанию.
Может первый слайд загрузить не может (точнее нулевой)? Поэтому и работает только с настройкой slide=1 и не циклится, т.к. первый не работает.
Добрый день. Я нашел причину - имена рисунков были цифрами. При замене на буквы слайдер заработал.
Отличный слайдер! как раз то что нужно, моя благодарность.
Привет, отличный слайдер, а как бы сделать к нему элементы управления в виде точек (dots) , ну как обычно на слайдерах делается. Нажатие на конкретную точку - переход на этот слайд. Если не трудно, приведите код пожалуйста (css не нужно, достаточно JS). Заранее спасибо!
Автоматом наверное не сделать.
Можно вручную нарисовать любые точки и прописать на них
$(".example").vegas('jump', 3);- прыгнет на 3тий слайд
отличный слайдер, спасибо