Bonjour à tous,

J'ai décidé de me lancer dans le développement de slider () en suivant de très près un tutoriel vidéo 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 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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 javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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 !