<div id="slider">
  <ul class="slides">
    <li class="slide slide1">slide1</li>
    <li class="slide slide2">slide2</li>
    <li class="slide slide3">slide3</li>
    <li class="slide slide4">slide4</li>
    <li class="slide slide5">slide5</li>
    <li class="slide slide1">slide1</li>
  </ul>
</div>

body, html {
  margin: 0;
  padding: 0;
}
#slider {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.slides {
  position: relative;
  margin: 0;
  padding: 0;
}
.slide {
  position: absolute;
  list-style-type: none;
  text-align: center;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
}
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}

var width = 100;
var animation_speed = 700;
var time_val = 3000;
var current_slide = 1;

var $slider = $('#slider');
var $slide_container = $('.slides');
var $slides = $('.slide');

var interval;

$slides.each(function(index){
  $(this).css('left',(index*100)+'%');
});

function startSlider() {
  interval = setInterval(function() {
    $slide_container.animate({'left': '-='+(width+'%')}, animation_speed, function() {
      if (++current_slide === $slides.length) {
        current_slide = 1;
        $slide_container.css('left', 0);
      }
    });
  }, time_val);
}

startSlider();