Mon slider ne marche pas

Bonsoir à tous,
j'ai décidé de me lancer dans le développement de slider en suivant de très près un tutoriel video sur youtube. Malheureusement, je rencontre deux problèmes. Alors je viens demander de l'aide.

1er problème: insertion d'image via CSS

Après avoir attentivement suivi le tutoriel et même parcouru internet (google) pour d'éventuelles solutions, rien a marché. Alors j'ai fait ce que je sais faire le mieux: insertion direct dans le code html. Mais ce n'est pas ce que je veux.

2ème problème: animation des images sur click

Là aussi, c'est tout un casse tête, parce je ne sais plus que faire. je ne retrouve pas l'erreur et finalement je ne réussie pas à avancer dans mon travail.

Aidez-moi svp! Voici mes différent codes:

HTML:

  <div id="galerie">
   <div class="slider">
    <a href="#"><img src="images/img1.jpg"></a>
    <a href="#"><img src="images/img2.jpg"></a>
    <a href="#"><img src="images/img3.jpg"></a>
    <a href="#"><img src="images/img4.jpg"></a>
    <a href="#"><img src="images/img5.jpg"></a>
    <a href="#"><img src="images/img6.jpg"></a>
    <a href="#"><img src="images/img7.jpg"></a>
    <a href="#"><img src="images/img8.jpg"></a>
    <a href="#"><img src="images/img9.jpg"></a>
    <a href="#"><img src="images/img10.jpg"></a>
    <a href="#"><img src="images/img11.jpg"></a>
    <a href="#"><img src="images/img12.jpg"></a>
    <a href="#"><img src="images/img13.jpg"></a>
    <a href="#"><img src="images/img14.jpg"></a>
    <a href="#"><img src="images/img15.jpg"></a>
    <a href="#"><img src="images/img16.jpg"></a>
    <a href="#"><img src="images/img17.jpg"></a>
   </div>
   <div class="suiv"><img src="images/fleched.png"></div>
   <div class="prec"><img src="images/flecheg.png"></div>
  </div>

CSS:

body{
 width:80%;
 margin:auto;
}
#galerie{
 position:relative;
 height:200px;
 overflow:hidden;
}
.suiv{
 cursor:pointer;
 position:absolute;
 top:30px;
 right:0;
 margin-top:auto;
 //background-image: url("images/fleched.png");
}
.prec{
 cursor:pointer;
 position:absolute;
 top:30px;
 left:0;
 margin-top:auto;
 //background-image: url("images/flecheg.png");
}
.slider{
 width:5000px;
}

JS:

$(document).ready(function() {
 s = new slider("#galerie");
});

var slider = function(id){
 self=this;
 this.div = $(id);
 this.slider=this.div.find(".slider");
 this.largeurCache = this.div.width(); 
 this.largeur=0;
 this.div.find('a').each(function(){
  self.largeur+=$(this).width();
  self.largeur+=parseInt($(this).css("padding-left"));
  self.largeur+=parseInt($(this).css("padding-right"));
  self.largeur+=parseInt($(this).css("margin-left"));
  self.largeur+=parseInt($(this).css("margin-right"));
 });
 this.prec = this.div.find(".prec");
 this.suiv = this.div.find(".suiv");
 this.saut = this.largeurCache/2;
 this.nbEtapes = Math.ceil(this.largeur/this.saut);
 this.courant=0;
 
 this.suiv.click(function(){
  self.courant++;
  self.slider.animate({
   left:-self.saut
  },1000);
 });
};

EDIT : ajout des balises de code.