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/