Settings

Slideshow options and settings

Option	Default	Description
slide	0	Index number of initial slide.
preload	false	Preload both images and videos at start.
preloadImage	false	Preload images at start. preload must be false .
preloadVideo	false	Preload videos at start. preload must be false .
timer	true	Display/hide timer bar. The timer class is `.vegas-timer-progress` .
overlay	false	Display/hide the overlay. Could be true false or the path of an overlay image pattern. These image can be found in the overlays folder. Read the Overlay section for more information.
autoplay	true	Start the Slideshow automatically.
loop	true	Loop the Slideshow.
shuffle	false	The array of slides is shuffled before.
delay	5000	Delay beetween slides in milliseconds.
cover	true	true the slide image is scaled to fit the container. false the slide image is displayed entirely. repeat the slide image is repeated.
color	-	Slide background color.
align	center	Horizontal alignment of the image in the slide. Could be center top right bottom left or a percentage.
valign	center	Vertical alignment of the image in the slide. Could be center top right bottom left or a percentage.
transition	fade	Set the transition between slides. Could be a transition name, random or an array of transition picked randomly. Read the Transition section for more information.
transitionDuration	1000	Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
firstTransition	-	Set the transition for the first played slide. Could be a transition name, random or an array of transition picked randomly. Read the Transition section for more information.
firstTransitionDuration	-	Set the transition duration in milliseconds for the first played slide. Could be auto so the transition duration will be equal to the slide delay .
transitionRegister	-	Add custom transitions to the transitions list available in random mode. Read the Transition section for more information.
animation	-	Set the animation of the slides. Could be an animation name, random or an array of transition picked randomly. Read the Transition section for more information.
animationDuration	auto	Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .
animationRegister	-	Add custom animations to the animations list available in random mode. Read the Transition section for more information.
slidesToKeep	1	Number of slides to keep in the background before removing it.
slides	-	Array of slides. Read the option section for more information.

$elmt.vegas({
    delay: 7000,
    timer: false,
    shuffle: true,
    firstTransition: 'fade',
    firstTransitionDuration: 5000,
    transition: 'slideDown2',
    transitionDuration: 2000,
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ]
});

Test the code

Click the button to test the example.

Run code

Slide settings

Specific slide options and settings.

Option	Default	Description
src	-	Path of the image.
video	-	Path of the video. Could be a string or an array of sources. Read the Video section for more information.
delay	5000	Delay beetween slides in milliseconds.
cover	true	true the background image is scaled to fit the container. false the background image is displayed entirely.
color	-	Slide background color.
align	center	Horizontal alignment of the image in the slide. Could be center top right bottom left or a percentage.
valign	center	Vertical alignment of the image in the slide. Could be center top right bottom left or a percentage.
transition	fade	Set the transition of this slide. Could be a transition name, random or an array of transition picked randomly. Read the Transition section for more information.
transitionDuration	1000	Set the transition duration in milliseconds. Could be auto so the transition duration will be equal to the slide delay .
animation	-	Set the animation of this slide. Could be an animation name, random or an array of transition picked randomly. Read the Transition section for more information.
animationDuration	auto	Set the animation duration in milliseconds. Could be auto so the animation duration will be equal to the slide delay .

$elmt.vegas({
    timer: false,
    transition: 'slideLeft2',
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg', transition: 'slideRight2' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg', transition: 'slideRight2' }
    ]
});

Test the code

Click the button to test the example.

Run code

Callbacks and events

Vegas provides callback functions and events triggers on init, play, pause and slide change.

Option	Event	Description
init	vegasinit	Function called when Vegas is applied to an element.
play	vegasplay	Function called when Vegas starts to play the slideshow.
pause	vegaspause	Function called when Vegas pauses the slideshow.
walk	vegaswalk	Function called when Vegas changes the slide.
end	vegasend	Function called when the Slideshow is completed (loop: false).

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ],
    init: function (globalSettings) {
        console.log("Init");
    },
    play: function (index, slideSettings) {
        console.log("Play");
    },
    walk: function (index, slideSettings) {
        console.log("Slide index " + index + " image " + slideSettings.src);
    }
});

Test the code

Click the button to test the example.

Run code

$elmt.on('vegaspause', function (e, index, slideSettings) {
    console.log("Pause on Slide index " + index);
});

Overlays

Overlays are repeated dot pattern that can be applied to reduce artefact effects on scaled backgrounds.

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' }
    ],
    overlay: true
});

The overlay class is.vegas-overlay .

Videos

Experimental video support is providedas a bonus . Video backgrounds could not behave as expected on some browsers. Use it at your own risk :)

Option	Default	Description
video.src	[]	Array of videos files
video.loop	true	Loop the video
video.mute	true	Mute the sound of the video

$elmt.vegas({
    slides: [
        {   src: '/img/slide1.jpg' },
        {   src: '/img/slide2.jpg',
            video: {
                src: [
                    '/videos/video.mp4',
                    '/videos/video.webm',
                    '/videos/video.ogv'
                ],
                loop: false,
                mute: true
            }
        }
    ]
});

Test the code

Click the button to test the example.

Run code

Imagesrc is required for video slides as a fallback when videos cannot be played. The fallback image will be displayed instead. By default Vegas excludes mobile devices.

$.vegas.isVideoCompatible = function () {
    var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
    return !devices.test(navigator.userAgent);
}

Override this function if needed.

Zip file

Download the last version (2.1.x).

Download

Source code

Fork the project and contribute.

Source

Need support?

Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving your problem.

Ask for Support