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

Par blooh, il y a 15 ans

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, il y a 15 ans

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, il y a 15 ans

Ca ne fonctionne toujours pas :(

mespeche, il y a 15 ans

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

blooh, il y a 15 ans

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, il y a 15 ans

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, il y a 15 ans

Ben oui mais sous forme commentaire :/

mespeche, il y a 15 ans

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, il y a 15 ans

Non

mespeche, il y a 15 ans

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, il y a 15 ans

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, il y a 15 ans

Et le alert(elem); te retourne quoi ?

blooh, il y a 15 ans

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