Simple pure javascript image slider

Question

I'm trying to make the most simple image slider possibly in pure js, basically by changing the background position, but loop doesn't work at all. I need to repeat the loop continuously.

function slider1(){
var slide = document.getElementById("slider-1");
var slideWidth = 320;
var backPosY = 0;
var backPosX = 0;
var sliderEnd = 960;
var f;
for(f=backPosX;f < sliderEnd; f+=slideWidth){
    slide.style.backgroundPosition = "-"+f+"px "+backPosY+"px";
}
setInterval(slider1(),1000);}

Answer 1

setInterval takes function as first parameter, but you passed slider1() .

Parentheses means calling function so you are calling slider1 and passing to setInterval only returned value of function call.

In your case slider1 does not return anything, that means that setInterval receives undefined instead of your function.

You need to pass the function itself, not results of its calling.

setInterval(slider1, 1000);

But be aware that every call will start a new interval and you don't want to have multiple intervals running calling the same function.

So call setInterval outside of your function or replace setInterval with setTimeout . Timeout will call your function once and your function will create new timeout and so on.

Edit: Also your for loop loops through all positions in one moment. But you want to move it by one position.

I would do it like this:

var slide = document.getElementById("slider-1");
var slideWidth = 320;
var backPosY = 0;
var backPosX = 0;
var sliderEnd = 960;
var f = backPosX;
function slider1(){
    slide.style.backgroundPosition = "-"+f+"px "+backPosY+"px";
    f+=slideWidth;
    if(f >= sliderEnd)
        f = backPosX;
}
setInterval(slider1, 1000);

Edit 2: This code can be used on multiple sliders:

function moveSlider(slide){ // Slide is now a function parameter
    var slideWidth = 320;
    var backPosY = 0;
    var backPosX = 0;
    var sliderEnd = 960;
    if(!slide.slidePosition)    // If there isn't slidePosition in the element
        slide.slidePosition = backPosX; // Initialize it
    slide.slidePosition+=slideWidth;
    if(slide.slidePosition >= sliderEnd)    //
        slide.slidePosition = backPosX;
    slide.style.backgroundPosition = "-"+slide.slidePosition+"px "+backPosY+"px";
}

function startSlider(slide){    // Start slider's interval
    return setInterval(function(){
        moveSlider(slide);
    }, 1000);
}

function stopSlider(intervalId){    // setInterval return ID which you can use to stop the interval
    clearInterval(intervalId);
}

You can then start slider with:

startSlider(document.getElementById("slider-1"));

Notice that I need to pass parameter to moveSlider . So I wrapped in another function doesn't take any parameters and calls moveSlider with slider as parameter. This code example can explain it a bit:

function slide1(){
    ...
}
// Can be also written as:
slide1 = function(){
    ...
}

I just removed the middle man slide1 and passed it directly.