Bonjour,
Je viens de réaliser un slider grâce à ce tuto :
http://www.grafikart.fr/tutoriels/slider-javascript-jquery-54
Tous fonctionne mais j'aimerais aborder un point non donné dans le tutoriel , comment faire un slider infini , par infini j'entends qu'il revient à zéro tous seul quand on est arrivé au bout , au lieu de se bloquer une fois arrivé au bout et de cliquer sur les flèches opposées ...
Il parait qu'il est question d'un numCourant qu'il faut mettre à 0 ...
Quelqu'un peut il m'aider mes compétences en javascript sont limitées
Deuxièmement mon slider va trop loin , d'un coté il s'arrête à la dernière image ( ce qui est bon ) mais de l'autre il va une fois trop loin ce qui fait qu'il n'y a plus d'image , il ne se bloque pas comme le premier coté ...
Ce doit être une question de saut mais je ne vois pas comment faire .
Voici mon code javascript :
Merci d'avance,
Cordialement.
Je viens de réaliser un slider grâce à ce tuto :
http://www.grafikart.fr/tutoriels/slider-javascript-jquery-54
Tous fonctionne mais j'aimerais aborder un point non donné dans le tutoriel , comment faire un slider infini , par infini j'entends qu'il revient à zéro tous seul quand on est arrivé au bout , au lieu de se bloquer une fois arrivé au bout et de cliquer sur les flèches opposées ...
Il parait qu'il est question d'un numCourant qu'il faut mettre à 0 ...
Quelqu'un peut il m'aider mes compétences en javascript sont limitées
Deuxièmement mon slider va trop loin , d'un coté il s'arrête à la dernière image ( ce qui est bon ) mais de l'autre il va une fois trop loin ce qui fait qu'il n'y a plus d'image , il ne se bloque pas comme le premier coté ...
Ce doit être une question de saut mais je ne vois pas comment faire .
Voici mon code javascript :
$(document).ready(function(){
s = new slider("#galerie_slider");
});
var slider = function(id){
var 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;
this.nbEtapes = Math.ceil(this.largeur/this.saut - this.largeurCache/this.saut);
this.courant=0;
this.prec.click(function(){
if(self.courant<=self.nbEtapes){
self.courant++;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
this.suiv.click(function(){
if(self.courant>0){
self.courant--;
self.slider.animate({
left:-self.courant*self.saut
},1000);
}
});
}Merci d'avance,
Cordialement.