$(document).ready(function(){
//on indique la taille des déplacement
var tailleSlide=521;
//et le nombre total de div
var nbDiv=10;

//vitesse du déplacement en miliseconde
var vitesseSlide=600;
//couleur de fond des bouton
var couleurdefaut="#E8EDF1";
var couleurbloque="#FBFBFB";

var i=0;

  //au clic sur le bouton gauche
	$(".slide1-bibliotheque").click(function(){	
	//on envoie le slider à la position précédente à l'actuelle
	//sauf si on est au bout
	if(i>0)
	{
    i=i-1;
  }
  //si on est au bout on change la couleur du bouton
  if(i==0)
  {
    $(".slide1-bibliotheque").css("background", couleurbloque);
  }
  //sinon on remet la bonne couleur
  else
  {
    $(".slide1-bibliotheque").css("background", couleurdefaut);
  }
  //si on est à l'autre bout on change la couleur du bouton droit
  if(i==nbDiv)
  {
    $(".slide2-bibliotheque").css("background", couleurbloque);
  }
  //sinon on remet la bonne couleur
  else
  {
    $(".slide2-bibliotheque").css("background", couleurdefaut);
  }
		$("#slidebox-bibliotheque")
		.animate({right: tailleSlide*i}, vitesseSlide)
		return false;
	});
	
	//au clic sur le bouton droite
	$(".slide2-bibliotheque").click(function(){
	//on envoie le slider à la position suivant la position actuelle
	//sauf si on est au bout
	if(i<nbDiv)
	{
	 i=i+1;
	}
	//si on est au bout on change la couleur du bouton
  if(i==0)
  {
    $(".slide1-bibliotheque").css("background", couleurbloque);
  }
  //sinon on remet la bonne couleur
  else
  {
    $(".slide1-bibliotheque").css("background", couleurdefaut);
  }
  //si on est à l'autre bout on change la couleur du bouton droit
  if(i==nbDiv)
  {
    $(".slide2-bibliotheque").css("background", couleurbloque);
  }
  //sinon on remet la bonne couleur
  else
  {
    $(".slide2-bibliotheque").css("background", couleurdefaut);
  }
		$("#slidebox-bibliotheque")
		.animate({right: tailleSlide*i}, vitesseSlide)
		return false;
	});

});