Discussion :

[Digilougm]

Bonjour,

Pour les besoins d'une application j'utilise le plugin jQuery Carousel. Celui-ci fonctionne très bien, à un détail près. Au chargement de ma page, il doit se trouver dans un conteneur caché (display:none), puis être affiché par la suite lors d'une certaine action de l'utilisateur. Or, s'il est caché lors du chargement de la page, il ne fonctionne pas correctement et les images de son contenu ne s'affichent pas. J'ai effectué plusieurs recherches pour déterminer la cause, mais je n'ai rien trouvé jusqu'à présent. Avez-vous une idée ?

Merci par avance.

[SpaceFrog]

Sans voir ton code ? ...

[Digilougm]

Effectivement, ça sera peut-être plus simple avec le code.

HTML

Code :

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

1
2
3
4
5
6
7
8
9
 
<div id="content_1" class="content">
<div id='carouselContainer'><div class='carousel1'>
   <ul>
      <li><img src='img1' /></li>
      <li><img src='img2' /></li>
      <li><img src='img3' /></li>
   </ul>
</div></div></div>

CSS

Code :

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

1
2
3
 
#content_1 {
display:none;}

Javascript

Code :

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

1
2
3
4
5
6
 
<script type="text/javascript">
$(function(){
	$("div.carousel1").carousel({autoSlide: true, loop:true, animSpeed: "slow"});
});
</script>

Javascript pour afficher le carousel

Code :

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

1
2
 
document.getElementById("content_1").style.display = 'block';

En fait, le fait que le carousel soit caché au chargement de la page semble empêcher le chargement de son contenu. Si j'enlève le display:none, tout fonctionne correctement.