Image slider using pure javascript

Question

I want to create image slider using pure JS with slide effect.When I hit next button first time it works.first image goes left and second comes.but second time I hit image it begans again from first.Why third image does not slide? You can change next function

    <style>
        #container{
            width: 870px;
            height: 540px;
            overflow: hidden;
            margin: 0 auto;
        }
        #img-holder{
            width: calc(870px*3);
        }
        img{
            float: left;
            position: relative;
        }
    </style>


<div id="container">
    <div id="img-holder">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3">
    </div>
    <div id="buttons">
        <button id="left">prev</button>
        <button id="right" onclick="next()">next</button>
    </div>
</div>

<script>

goRight=1;

function next () {
    // body... 

    interval =setInterval(Slide,2);

}

function Slide () {
    // body... 
    var img=document.querySelectorAll("#img-holder img");
    for(i=0;i<img.length;i++){
        img[i].style.right=goRight+"px";
    }

    goRight=goRight+1;
    console.log(goRight)

    if((goRight-1)%870==0){


        clearInterval(interval);
        goRight=1;
    }
}

</script>

Answer 1

it is because you reset goRight once you've finished a scroll.

if((goRight-1)%870==0){
    clearInterval(interval);
   // goRight=1; //  <--   this is your problem 
}

you'll need to use a better condition to reset goRight once you've made it to the end of the gallery, maybe use another var that counts the image you're on

<style>
    #container{
        width: 870px;
        height: 540px;
        overflow: hidden;
        margin: 0 auto;
    }
    #img-holder{
        width: calc(870px*3);
    }
    img{
        float: left;
        position: relative;
    }
</style>


<div id="container">
    <div id="img-holder">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/1.jpg" alt="1">
        <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/2.jpg" alt="2">
       <img src="http://demo.evatheme.com/html/white/image_slider/images/blog/3.jpg" alt="3">
    </div>
    <div id="buttons">
        <button id="left">prev</button>
        <button id="right" onclick="next()">next</button>
    </div>
</div>

<script>

var goRight=1,visible_index = 1;

function next () {
    // body... 
    visible_index++

    interval =setInterval(Slide,2);

}

function Slide () {
    // body... 
    var img=document.querySelectorAll("#img-holder img");
    for(i=0;i<img.length;i++){
        img[i].style.right=goRight+"px";
    }

    goRight=goRight+1;
    console.log(goRight)

    if((goRight-1)%870==0){


        clearInterval(interval);
        if(visible_index == img.length)
               goRight=1;
    }
}

</script>