// On compte le nombre d'images dans le bloc #slider
var nombre = $("#slider img").length;
// On charge tout de suite la première image qui n'a pas besoin de transition
var firstimg = $("#slider").find('img:first');
$("#slider").css('background','url("'+ firstimg.attr('src') +'") no-repeat');
// On créé une variable qui nous servira à afficher la deuxième image, puis la troisième etc.
var  slice = 0;
// On crée une variable qui nous servira à incrémenter le z-index des images
var zindex = 60;
// On commence l'interval 
var anime_slider = setInterval( function(){
// Cette ligne nous dis grossomodo que si on a atteint la dernière image on repasse à la première
if(slice == nombre) { slice = 0;} 
/* On crée une variable newimg qui récupère la valeur de src de l'image
Vous remarquerez également le selecteur :eq("+slice+") qui nous sert à sélectionner 
la bonne image avec la var slice */
var newimg = $("#slider img:eq("+slice+")").attr('src');
// On crée un div avec un id unique 
$("#slider").append('<div id="my_'+slice+'" class="slice"></div>');
// On lui donne un background correspondant à l'image et surtout un width de 0px
$('#my_'+slice+'').css({'z-index': zindex, left:'0px',top:'0px', width: '0px',background: 'url("'+ newimg +'") no-repeat'});
// On démarre animate qui part de 0px vers 860px et on incrément slice de 1 pour la prochaine image
$('#my_'+slice+'').animate({ width:'860px'},1000,function (){ slice = slice+1;});
// On incrémente le z-index
zindex = zindex+1;
}, 3500);