Contenu dynamique en javascript avec jquery CarouFredSel

**kaching** · 09/12/2013, 11h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" )