Contenu dynamique en javascript avec jquery CarouFredSel
Bonjour, j'utilise le plugin Jquery CarouFredSel pour faire un slider de contenu.
Le principe est simple, après avoir appelé le .js de CarouFredSel, et avoir initialisé en haut de ma page avec :
Code:
1
2
3
4
5
6
7
8
9
| $(document).ready(function() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
prev: '#prev2',
next: '#next2',
width: '970',
auto: false
});
}); |
Il suffit de mettre celà dans la page pour créer le slider :
Code:
1
2
3
4
5
6
7
8
9
| <div class="list_carousel" id="list-carrou">
<ul id="foo2">
<li>Test</li>
<li>Tes</li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><div class="progPrev"></div></a>
<a id="next2" class="next" href="#"><div class="progNext"></div></a>
</div> |
Si je rajoute plusieurs <li> le slider fonctionne (à savoir que les bouton prev et next s'affichent (car ils sont hidden par défaut si y'a pas assez de <li>))
Mais voilà mon problème, j'aimerai rajouter mes <li> grâce à un script javascript (qui va parcourir un xml, ce script fonctionne) mais CarouFredSel ne prend pas en compte ces <li> "dynamiques" qui sont pourtant bien là dans le code source de la page HTML.
Si je mets quelques <li> "a la mano" dans le code, le slider fonctionne mais il supprime mes <li> dynamiques.
Voici mon code pour rajouter ces <li> :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| $.get( "<?php echo $fichierxml;?>", function( xml ){
var carr = document.getElementById("foo2");
$( xml ).find( "chaines" ).children( "chaine" ).each( function( i, item ){
$( item ).children( "event" ).each( function( j, jtem ){
cell = document.createElement("li");
var texte = document.createElement("span");
texte.innerHTML = "test";
cell.appendChild(texte);
carr.appendChild(cell);
cell.setAttribute('style','width: 50px;font-size:10px;text-aign:center;');
});
});
}, "xml" ) |
Avez-vous déjà eu ce problème ? avez-vous une piste de recherche ? merci !
