Bonsoir, j'ai suivis ce tutoriel et j'ai modifié un peu le slider à ma sauce mais n'ayant que très peu de connaissances jquery je galère un peu.

Pour commencer j'ai modifier ses dimensions, il est maintenant de 150px de hauteur et 768px de largeur.
Ensuite, j'ai fait en sorte que lorsqu'on arrive à la fin du slider, à la place de désactiver le bouton suivant, ça repars au début, indéfiniment. Idem pour le bouton précédent. J'ai aussi fait en sorte que quand on appuie sur le bouton suivant, ça fait défiler toutes les images visibles pour en montrer d'autres (j'ai enlevé le divisé par 2 à this.saut = this.largeurCache/2;).

Alors mon problème est que lorsqu'on arrive à la fin du slider, il faut cliquer 2 fois sur suivant avant que ca fonctionne (1er click il ne se passe rien, 2eme clique ça reviens au début du slider. Idem pour précédent.

Donc il faudrait que ça fonctionne dès le 1er clic.

Ensuite, le slider ne fonctionne pas sous chrome :(
Voici mon code JS, merci d'avance pour votre aide j'en ai besoin là ^^

$(document).ready(function(){
    s = new slider("#slider","a",0.8);
});
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.precedent = this.div.find(".precedent");
    this.suivant = this.div.find(".suivant");
    this.saut = this.largeurCache/2;
    this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
    this.courant=0;

    this.suivant.click(function(){
        if(self.courant<=self.nbEtapes){
            self.courant:++
            self.slider.animate({
                 left:-self.courant*self.saut
            },1000);
        }
        else{
        }
    });
    this.precedent.click(function(){
        if(self.courant>0){
            self.courant--;
            self.slider.animate({
                 left:-self.courant*self.saut
            },1000);
        }
        else{
        }
    });
}

4 réponses


Zayon
Auteur

up ;)

Zayon
Auteur

re up ^^

Zayon
Auteur

up

Salut ZAYON,
je pense que tu ne devrais pas t’embêtait, tu devrait utiliser caroufredsel pour faire ton slider,
il est vachement modulable, plus GrafikArt à fait un tuto dessu : ici

En plus tu peut le faire en ligne est récupérer le code après : ici