$(document).ready(function() {

    /*for (i = 0; i < 10; i++) {*/
    //$(this).each(function() {
    //Animer(-294);
    //$('.navigation li').removeClass('active'); $('#Etape2').addClass('active');
    //setTimeout("Animer(-294)", 10000);
    //setTimeout("Animer(-588)", 10000);
    //setTimeout("Animer(0)", 10000);
    //Animer(-588);
    //$('.navigation li').removeClass('active'); $('#Etape3').addClass('active');
    // Animer(0);
    //$('.navigation li').removeClass('active'); $('#Etape1').addClass('active');

    setTimeout(function() {

        Animer(-294);
        $('.navigation li').removeClass('active'); $('#Etape2').addClass('active');

    }, 10000);

    setTimeout(function() {

        Animer(-588);
        $('.navigation li').removeClass('active'); $('#Etape3').addClass('active');

    }, 20000);

    setTimeout(function() {

        Animer(0);
        $('.navigation li').removeClass('active'); $('#Etape1').addClass('active');

    }, 30000);

    // });
    /*}*/

    $('#Etape1').click(function() { Animer(0); $('.navigation li').removeClass('active'); $(this).addClass('active'); });
    $('#Etape2').click(function() { Animer(-294); $('.navigation li').removeClass('active'); $(this).addClass('active'); });
    $('#Etape3').click(function() { Animer(-588); $('.navigation li').removeClass('active'); $(this).addClass('active'); });

});

function Animer(position) {

    $('#Test').animate({

        left: position + 'px'

    }, 1000);

}