[Tutoriel carrousel] <Span> </span> ne s'affiche pas au rendu

blooh
Javascript

Bonjour à tous,
J'ai un gros soucis qui me tracasse: Les 1,2,3... entre les balises <span> et </span> ne s'affiche pas. Je pense que ça doit semblablement venir du code je vous montre tout:

carrousel.php: (ce fichier est inclut dans ma page index)

<div id="carrousel">
     <div id="slide1" class="slide">
           <div class="visu">
           <img src="design/test3">
           </div>
          <div class="title">
          test
          </div>
          </div>
          <div id="slide2"class="slide">
           <div class="visu">
           <img src="design/test2.png">
           </div>
          <div class="title">
          coucou
          </div>
          </div>

     <div id="slide3"class="slide">
           <div class="visu">     
<img src="design/test.png">
           </div>
          <div class="title">
         bla bla bla
          </div>
          </div>
<!--
<div class="navigation">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
-->
</div>

<u>carrousel.js :</u> (le code n'est pas fini je me suis arrêté là où ca me pose problème) 

var carrousel ={
    nbSlide: 0,
    nbCurrent: 1,
    elemCurrent: null,
    elem: null,

     init: function(elem){
         this.nbSlide = elem.find(".slide").length;
         //Créer ma pagination
         elem.append('<div class="navigation"></div>');
         for(var i=1;i<=this.nbSlide;i++){
            elem.find(".navigation").append("<span>"+i+"</span>");
       }
        //Initialisation du carrousel 
        this.elem=elem;
        elem.find("slide").hide();
        elem.find("slide:first").show();
        elemCurrent = elem.find(".slide:first");
     }
}
$(function(){
carrousel.init($("#carrousel"));
});

Dites-moi ou est le problème svp

Merci d'avance pour vos réponses =) .

12 réponses

mespeche

Personnellement je ferai l'initialisation du caroussel directement au début de la fonction init, comme ceci :

var carrousel ={
    nbSlide: 0,
    nbCurrent: 1,
    elemCurrent: null,
    elem: null,

     init: function(elem){
            //Initialisation du carrousel 
        this.elem=elem;
        elem.find("slide").hide();
        elem.find("slide:first").show();
        elemCurrent = elem.find(".slide:first");
        this.nbSlide = elem.find(".slide").length;
        //Créer ma pagination
        elem.append('<div class="navigation"></div>');
        for(var i=1;i>=this.nbSlide;i++){
            elem.find(".navigation").append("<span>"+i+"</span>");
            }

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

Et modifie ta condition : 

for(var i=1;i>=this.nbSlide;i++)

devient : 

for(var i=1;i<=this.nbSlide;i++)
blooh
Auteur

Ca ne fonctionne toujours pas :(

mespeche

Dans ton code source sur le navigateur tu vois quoi ? Les span sont en place ou pas ?

blooh
Auteur

et bien d'après le tutoriel il dit d'enlever les span car on va les créer en javascript donc je l'est est mit sous forme de commentaire <!-- -->

mespeche

Oui oui ça j'ai vu dans le code que tu as montré, mais quand tu fais afficher le code source dans le navigateur, est-ce que le html comporte ta navigation avec les span

blooh
Auteur

Ben oui mais sous forme commentaire :/

mespeche

Supprime ta navigation de ton html de toute manière commentée ou non tu va l'ajouter en Javascript donc pas besoin dans ton html, ensuite vérifie si dans ton code source, la navigation que tu génère en Javascript, s'ajoute a ton html ou non

blooh
Auteur

Non

mespeche

Ta ligne elem.append('<div class="navigation"></div>'); génère bien la balise dans ton html ou pas ? Fait un alert(elem); voir si déjà elem vaut bien ce qu'il faut, et dans ton css vérifie que tu ne cache pas ta navigation.

blooh
Auteur

Ben la ligne elem.append('<div class="navigation"></div>'); est dans le fichier .js et <div class="navigation"></div> n'est pas dans le HTML.

mespeche

Et le alert(elem); te retourne quoi ?

blooh
Auteur

Oui j'ai déja testé mais ça ne fait rien :@!