Bonjour,

Je fais un carrousel en pleine page, il fonctionne, jusqu'ici tout va bien mais à la place des "num" j'aimerais qu'à chaque click sur une bulle, on puisse accéder au slide.
Voici mon code html:

<div id="conteneur">
<div id="carrousel">

<div id="slide1" class="slide">
<div class="visu">
<img src="images/background/HomePage.jpg" alt="backgroundHomePage" width="1920" height="1080" border="0">
</div>
</div>

<div id="slide2" class="slide">
<div class="visu">
<img src="images/background/WebPage.jpg" alt="backgroundHomePage" width="1920" height="1080" border="0">
</div>
</div>

<div id="slide3" class="slide">
<div class="visu">
<img src="images/background/VideoPage.jpg" alt="backgroundHomePage" width="1920" height="1080" border="0">
</div>
</div>

<div id="slide4" class="slide">
<div class="visu">
<img src="images/background/PrintPage.jpg" alt="backgroundHomePage" width="1920" height="1080" border="0">
</div>
</div>

<div id="slide5" class="slide">
<div class="visu">
<img src="images/background/StoryboardPage.jpg" alt="backgroundHomePage" width="1920" height="1080" border="0">
</div>
</div>

</div>
</div>

MON CSS:

carrousel {

height: 100%;
width: 1920px;
position: relative;
margin: 0;
}
.slide {
left: 0px;
position: absolute;
/*width: 980px;
height: 580px;*/
margin-top: -140px;
}
.navigation {
position: absolute;
bottom: -750px;
right: 475px;
}
.navigation span {
background-image: url(images/bulle.png);
background-repeat: no-repeat;
background-position: center center;
padding-right: 14px;
cursor:pointer;
}
.navigation span:hover {
background-image: url(images/bulle_hover.png);
background-repeat: no-repeat;
background-position: center center;
padding-right: 14px;
}
ET LE SCRIPT:
/*
CARROUSEL JS
*/

var carrousel = {

nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,

//stock le nb de slide qui existe
init : function(elem){
this.nbSlide = elem.find(".slide").length;

// Créer la pagination
elem.append('<div class="navigation"></div>');
for(var i= 0;i<=this.nbSlide;i++){
elem.find(".navigation").append('<span id="'+(i+1)+'"></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").addClass("hover");
this.elem.find(".navigation span:first").addClass("active");

// On cré 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.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 = 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()",5000);
}

}

$(function(){
carrousel.init($("#carrousel"));
});

Voilà, j'ai juste remplacé
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
par
for(var i= 0;i<=this.nbSlide;i++){
elem.find(".navigation").append('<span id="'+(i+1)+'"></span>');

}

mais pour la suite je ne sais pas comment reprendre cet "id" qui correspond à chq bulle pour accéder à chaque slide???

Quelqu'un pourrait m'aider, je suis novice dans javascript...
au secours!!!!!!

merci d'avance

1 réponse


Bonjour,
Utilise les balises

......

pour la lisibilité
Merci