SliderJS - autoplay function for slideshow

Question

I'm trying to implenet Nick Jonas' awesome SliderJS to a website. (https://github.com/nick-jonas/SliderJS)

Everything worked fine, but I want the images to be slided automatically. But now I cannot get an autoplay function to work.

There's a method called NextImage() - I think this is exactly what needs to be implemented, but I don't have a clue of how that works.

Here's my code.

$(document).ready(function() {

// SLIDER
$sl = $('#slider').slider({
    'media': [
        'images/1.jpg',
        'images/2.jpg',
        'images/3.jpg',
        'images/4.jpg',
        'images/5.jpg',
    ],
    'startIndex': 0,
    'easing': 'easeOutExpo',
    'draggable': false,
    'sizeConstraint': "cover",
    'animationSpeed': 600,
    'preloaderPath': "images/loading.gif",
    'minWidth': 200,
    'minHeight': 400,
});

});

Thanks to everyone that can help me out here :)

Answer 1

You can use seInterval (https://developer.mozilla.org/en-US/docs/DOM/window.setInterval), it:

Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.

And in every tick of the interval call the nextImage() as you think.

Your code will look like:

var $sl;
// SLIDER
$(document).ready(function () {
    $sl = $('#slider').slider({
        'media': [
            'http://cms.taradonne.com/uploads/food-541.jpg',
            'http://cms.taradonne.com/uploads/stills-26.jpg'],
            'startIndex': 0,
            'easing': 'easeOutExpo',
            'draggable': false,
            'sizeConstraint': "cover",
            'animationSpeed': 600,
            'minWidth': 200,
            'minHeight': 400,
    });

    window.setInterval(function () {
        changeImages()
    }, 2000);

});

function changeImages() {
    $sl.nextImage();
}

Here is a working fiddle: http://jsfiddle.net/IrvinDominin/PMRwK/1/