Mon slider ne marche pas

Bonjour à tous,

J'ai décidé de me lancer dans le développement de slider (:mouarf:) en suivant de très près un tutoriel vidéo sur youtube. Malheureusement, je rencontre deux problèmes. :oops: Alors je viens demander de l'aide. :roll:

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 n'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.

2e 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éussi pas à avancer dans mon travail.

Voici mes différent codes :

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <div id="galerie">
            <div class="slider">
                <a href="#"><img src="http://www.developpez.net/forums/images/img1.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img2.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img3.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img4.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img5.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img6.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img7.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img8.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img9.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img10.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img11.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img12.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img13.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img14.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img15.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img16.jpg"></a>
                <a href="#"><img src="http://www.developpez.net/forums/images/img17.jpg"></a>
            </div>
            <div class="suiv"><img src="http://www.developpez.net/forums/images/fleched.png"></div>
            <div class="prec"><img src="http://www.developpez.net/forums/images/flecheg.png"></div>
        </div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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("http://www.developpez.net/forums/images/fleched.png");*/
}
.prec{
    cursor:pointer;
    position:absolute;
    top:30px;
    left:0;
    margin-top:auto;
    /*background-image: url("http://www.developpez.net/forums/images/flecheg.png");*/
}
.slider{
    width:5000px;
}

JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(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.courant*self.saut
        },1000);
    });
};

PS : j'utilise la version jquery-1.9.1.min.

Merci d'avance !