J'espère trouver un peu d'aide sur ce forum parce que je suis bloqué sur mon caroussel , je n'arrive pas à obtenir le résultat escompter ...
Voici le résultat que j'obtiens :
http://img809.imageshack.us/i/carrousel.jpg/
Le résutat final devrait ressembler à ce site là :
http://www.games-workshop.com/gws/home.jsp
Je dois donc obtenir une image à droite en grand ( c'est bon je l'obtiens) et mes boutons à gauche ( le rectangle se transforme en rectangle avec flèche lorsque c'est le bouton correspondant à l'image , j'obtiens aussi ce résultat là ) donc pour l'instant tout va bien ...
Mon problème est qu'il y a automatiquement des numéros qui se mettent dans mes boutons ( 1,2 et 3 ) je ne sais pas comment les supprimer car j'aimerais mettre du texte à la place ... ou a défaut le placer à travers une image remplaçant le bouton vierge ( mais là aussi problème car mon javascript ne comporte qu'une seule "navigation"ce qui fait que je ne dispose que de l'image du bouton vierge et du bouton en hover ... je ne peux donc pas personnaliser chaque bouton puique je ne peux avoir que 2 modeles en clair ( le normal et celui avec fleche donc si je mets du texte ce sera le même partout ...
Voici mon code javascript :
Code : Tout sélectionner
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
//Créer la pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>")
}
elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
//Initialisation du carrousel
this.elem=elem;
elem.find(".slide").hide();
elem.find(".slide:first").show();
this.elemCurrent = elem.find(".slide:first");
this.elem.find(".navigation span:first").addClass("active");
//On créer le timer
carrousel.play();
//Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},
gotoSlide : function(num){
if(num==this.nbCurrent){ return false; }
/*Animation en fadeIn/fadeOut
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
*/
/*Animation en slide
var sens = 1;
if(num<this.nbCurrent){ sens = -1;}
var cssDeb = {"left" : sens*this.elem.width() };
var cssFin = {"left" : -sens*this.elem.width() };
this.elem.find("#slide"+num).show().css(cssDeb);
this.elem.find("#slide"+num).animate({"top":0,"left":0,},500)
this.elemCurrent.animate(cssFin,500);
*/
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num).hide().fadeIn();
var titleHeight = this.elemCurrent.find(".title").height();
this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom": 0},500);
this.elem.find(".navigation span").removeClass("active");
this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("#slide"+num);
},
next : function(){
var num = Number(this.nbCurrent)+1;
if(num >this.nbSlide){
num =1;
}
this.gotoSlide(num);
},
prev : function(){
var num = this.nbCurrent-1;
if(num< 1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},
play : function(){
window.clearInterval(carrousel.timer);
carrousel.timer = window.setInterval("carrousel.next()",6000);
}
}
$(function(){
carrousel.init($("#carrousel"));
});
Code : Tout sélectionner
#carrousel{
border:solid 2px #CDC3A2;
width:975px;
height:331px;
margin:44px 0 0 10px;
position:relative;
overflow:hidden;
}
.slide{
position:absolute;
top:0;
left:0;
width:975px;
height:331px;
}
.title{
position:absolute;
height:35px;
bottom:0;
left:0;
width:975px;
padding-left:15px;
line-height:35px;
background:url(theme/barre_carrousel.png);
color:#000000;
font-size:18px;
}
.navigation{
position:absolute;
top:-1px;
}
.navigation span{
position:relative;
background:url(theme/case_carrousel.jpg) no-repeat;
cursor:pointer;
height:113px;
width:337px;
display:block;
}
.navigation span:hover,.navigation span.active{
background:url(theme/case_carrousel_hover.png) no-repeat;
}
Merci d'avance,
Cordialement