</body>
    </html>

css #container{ position: relative; width:150px; overflow: hidden; height:150px; }

pic1,#pic3,#pic2{

position: absolute;
top: 0px;
left: 0px;
height:150px;
width:150px;
z-index:0;

}

js file

  //function passes the pics one by one at an interval of 3 seconds ,
//which is approx time a pic that is already passed takes to slide away

var slidePic = function(){
  var pics =  [document.getElementById("pic1"),document.getElementById("pic2"),document.  getElementById("pic3")];
  console.log(pics[0].style.left);
  var i =0;
  var int = setInterval(function(){
    while(i < 3){
      if(i===0)console.log("hi");
      slide(pics[i]);
      i++;
    }
  },3000);
}
//function to slide an element that is passed on to it
var slide = function(picture){

'use strict';

var pixel = 1;

var interval = setInterval(function(){
  if(picture.style.left != '150px'){
    var left = parseInt(picture.style.left);
    console.log(left);
    var totalPos = left + 1;
    //pic.style.left = totalPos.toString() + 'px' ;
    if(picture.style.zIndex){
      console.log("yeah");
    }
    picture.style.left = pixel.toString() + 'px';
  }

  pixel += 1;

  if(picture.style.left == '150px'){
    picture.style.left = '-150px';

    console.log(picture.style.left);
    pixel = -150;
    clearInterval(interval);
  }
},16.66);

}


window.onload = slidePic;