hello everyone!

here are my code :

html :

<div id="slider">
   <ul class="slides">
     <li>slide 1</li>
     <li>slide 2</li>
     <li>slide 3</li>
     <li>slide 4</li>
     <li>slide 5</li>
   </ul>
</div>

css :

#slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
 }
 .slides {
  display: block;
  height: 300px;
  margin: 0;
  padding: 0;
  z-index: 10;
 }
 .slides li {
  list-style: none;
  float: left;
  text-align: center;
  width: 500px;
  height: 300px;
 }

jquery :

$(function() {
 $('.slides li:odd').css('background' , '#fff54f');
 $('.slides li:even').css('background' , '#ff8173');
 $('.slides').css('width' , $('.slides li').width() * $('.slides li').length);

 var positionActuelle = 1; 
 
  setInterval(function() {
   $('.slides').animate({
    marginLeft: '-=500'
   }, 600, function() {
    positionActuelle++;
    if (positionActuelle==$('.slides li').length) {
     positionActuelle = 1;
     $('.slides').css('margin-left' , 0);
    }
    console.log(positionActuelle);
   });
  }, 3000);
 }
 
});

Someone can help me, please.

thanks