Vegas Background SlideShow

Methods

Vegas provides methods to give you complete control on your slideshow and its options.

Vanilla JS
jQuery

Method	Code	Description
play	instance.play(); $elmt.vegas('play');	Start the slideshow.
pause	instance.pause(); $elmt.vegas('pause');	Pause the slideshow.
toggle	instance.toggle(); $elmt.vegas('toggle');	Toggle play or pause.
next	instance.next(); $elmt.vegas('next');	Go to next slide.
previous	instance.previous(); $elmt.vegas('previous');	Go to previous slide.
jump	instance.jump(3); $elmt.vegas('jump', 3);	Go to a specific slide index.
shuffle	instance.shuffle(); $elmt.vegas('shuffle');	Shuffle the slide array.
playing	instance.playing(); $elmt.vegas('playing');	Return if the slideshow is playing/paused.
current	instance.current(); $elmt.vegas('current');	Return the current slide index.
destroy	instance.destroy(); $elmt.vegas('destroy');	Remove Vegas from the element.

play
previous
jump to first
shuffle
pause
next
jump to last
toggle

Vanilla JS
jQuery

document.querySelector('#play').addEventListener('click', () => {
    instance.play();
});

$('a#play').on('click', () => {
    $elmt.vegas('play');
});

Vanilla JS
jQuery

document.querySelector('#pause').addEventListener('click', () => {
    instance.pause();
});

$('a#pause').on('click', () => {
    $elmt.vegas('pause');
});

Vanilla JS
jQuery

document.querySelector('#toggle').addEventListener('click', () => {
    instance.toggle();
});

$('a#toggle').on('click', () => {
    $elmt.vegas('toggle');
});

Vanilla JS
jQuery

document.querySelector('#next').addEventListener('click', () => {
    instance.next();
});

$('a#next').on('click', () => {
    $elmt.vegas('next');
});

Vanilla JS
jQuery

document.querySelector('#previous').addEventListener('click', () => {
    instance.previous();
});

$('a#previous').on('click', () => {
    $elmt.vegas('previous');
});

Vanilla JS
jQuery

document.querySelector('#shuffle').addEventListener('click', () => {
    instance.shuffle();
});

$('a#shuffle').on('click', () => {
    $elmt.vegas('shuffle');
});

Vanilla JS
jQuery

document.querySelector('#first').addEventListener('click', () => {
    instance.jump(0);
});

$('a#first').on('click', () => {
    $elmt.vegas('jump', 0);
});

Vanilla JS
jQuery

document.querySelector('#last').addEventListener('click', () => {
    instance.jump(3);
});

$('a#last').on('click', () => {
    $elmt.vegas('jump', 3);
});

Options method

Options and settings can be changed on the fly.

Get

Get an option value.

Vanilla JS
jQuery

const transition = instance.options('transition');
const slides = instance.options('slides');

var transition = $elmt.vegas('options', 'transition');
var slides = $elmt.vegas('options', 'slides');

And so on...

Set

Set an option value.

Vanilla JS
jQuery

instance.options('transition', 'fade');
instance.options('slides', [ ... ]);

$elmt.vegas('options', 'transition', 'fade');
$elmt.vegas('options', 'slides', [ ... ]);

And so on...

Note that some options (preload overlay timer autoplay) can't be changed at runtime.

Example

Vanilla JS
jQuery

const instance = vegas('#example', {
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' }
    ],
    transition: 'slideLeft'
});

document.querySelector('#previous').addEventListener('click', () => {
    instance.options('transition', 'slideRight2');
    instance.previous();
});

document.querySelector('#next').addEventListener('click', () => {
    instance.options('transition', 'slideLeft2');
    instance.next();
});

document.querySelector('#add').addEventListener('click', () => {
    const slides = instance.options('slides');

    slides.push({ src:'/img/new-slide.jpg' });

    instance.options('slides', slides);
    instance.options('transition', 'slideDown');
    instance.jump(slides.length - 1);
    instance.options('transition', 'slideLeft2');
});

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

$('a#previous').on('click', () => {
    $elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});

$('a#next').on('click', () => {
    $elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
});

$('a#add').on('click', () => {
    const slides = $elmt.vegas('options', 'slides');

    slides.push({ src:'/img/new-slide.jpg' });

    $elmt
        .vegas('options', 'slides', slides)
        .vegas('options', 'transition', 'slideDown')
        .vegas('jump',    slides.length - 1)
        .vegas('options', 'transition', 'slideLeft2');
});

Test the code

Click the button to test the example.

Run code

Zip file

Download the last version (2.5.4).

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