Carousel Slider

HTML

<div id="slider">
    <div class="container">
        <a href="#"><img src="https://res.cloudinary.com/demo/image/upload/w_250,h_250,c_mfit/w_700/sample.jpg" alt="" width="300" height="300" /></a>
        <a href="#"><img src="https://i.ytimg.com/vi/PCwL3-hkKrg/maxresdefault.jpg" alt="" width="300" height="300" /></a>
        <a href="#"><img src="https://i1.wp.com/quicksoftwaretesting.com/assets/uploads/2014/10/Sample-WSDL-URLs-for-Testing-with-soapUI-e1414689584690.png?resize=640%2C556" alt="" width="300" height="300" /></a>
    </div>
</div>

CSS

#slider {
position: relative; margin: 0px; padding: 0px; 
    height: 300px; width: 300px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#slider .container {
    position: absolute;
    overflow: hidden;
}

#slider .container a {
    float: left; height: 300px; width: 300px; margin: 0px; padding: 0px;
}

JavaScript

var counter = 0, flow = 'ascending';

function slide(){
  if(flow == 'ascending') {
    counter++;
  } else {
    counter--;
  }
  if(counter == $('.container a').length) {
    flow = 'descending';
    counter = counter-2;
  } else if(counter == 0) {
    flow = 'ascending';
  }
  var leftpos = $('#slider img:first-child').width() * counter;
  $('.container').animate({
		left: -leftpos +'px'
	}, 200);  
  setTimeout(slide,3000);
}
$(document).ready(function() {
	setTimeout(slide,3000);
});