Problème d'affichage des images dans un slideshow en css3

Bonjour,
J'ai commencé il y a peu a essayer de monter un slideshow uniquement en css3 en suivant ce tuto Un slideshow en css3 .

Après quelques essais raté, le sideshow fonctionne enfin ! Seul petit bémol que je n'arrive pas à résoudre : lorsque l'on passe d'une image à l'autre, il y a un blanc, disons que l'image suivante n'apparait qu'une fois que la première a totalement disparu.

J'ai à nouveau essayé en reprenant exactement le code fourni par le tuto (en changeant juste le nom de mes id) et il n'y a rien a faire.

Voici mon code html :

<div id="diapo_home">
    <div id="s1">
        <div id="s2">
            <div id="s3">
                <a class="next next1" href="#s2">
                	<img src="media/images/btn_next_diapo.png">
                </a> <!-- Pour la 1ère étape -->
                <a class="prev prev2" href="#s1"><img src="media/images/btn_prev_diapo.png"></a> - <a class="next next2" href="#s3"><img src="media/images/btn_next_diapo.png"></a> <!-- Pour la 2ème étape -->
                <a class="prev prev3" href="#s2"><img src="media/images/btn_prev_diapo.png"></a> <!-- Pour la 3ème étape -->
                <ul id="sContent"> 
                    <li><img src="media/images/img_diapo1.png"/></li><!-- 
                    --><li><img src="media/images/img_diapo2.png"/></li><!--
                    --><li><img src="media/images/img_diapo3.png"/></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Et le css :

#diapo_home{
	position: relative;
    width: 993px;         
    height: 425px;       
    overflow: hidden;    
}
#sContent {
    position: absolute;  
    top: 0;         
    left: 0;            
    margin: 0;            
    padding: 0;
    width: 200%px;        
	z-index: 10;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
#sContent li {
    display: inline;      
}
#diapo_home .next, #diapo_home .prev {
    position: absolute;
    top: 200px;
    z-index: 20;
}

#diapo_home .prev { left: 0; }
#diapo_home .next { right: 0; }


#diapo_home .next, #diapo_home .prev { display: none; }
#diapo_home .next1 { display: block; }


#s1:target #sContent { left: 0px; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }



#s2:target #sContent { left: -993px; } 
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -1986px; } 
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }

Voila voila, si vous avez une idée ce qui cloche dans mon code, n'hésitez pas à me le dire car étant donné que j'ai les yeux dessus depuis un bon moment, je ne vois plus rien ^^
Modifié par VelvetSmoke (19 Jul 2013 - 10:18)

Hello,

Ce genre de problème apparait lorsque le conteneur qui englobe tes slide n'est pas assez grand pour contenir la totalité des slides mises bout à bout. Du coup les slides se mettent les unes en dessous des autres et doivent attendre que celles qui les précèdent ne soient plus affichées pour pouvoir se placer dans l'espace visible du slideshow.

C'est pour cette raison que le sélecteur #sContent de ton css définie une largeur. Largeur qui est d'ailleurs définie à 200%px donc déjà ça va pas marcher. C'est des % ou des px ?

De fait, cette largeur doit correspondre à la largeur totale des slides. Donc nombre_slides * 100% ou nombre_slides * largeur_slide_en_px.

moust a écrit :

Largeur qui est d'ailleurs définie à 200%px donc déjà ça va pas marcher. C'est des % ou des px ?

En effet ça risquait de vachement moins bien marcher ! Avec le nez dessus depuis une heure je n'avais même pas vu cette faute de code ! J'ai remis la taille des trois éléments en pixel et cela fonctionne parfaitement !

Je te remercie
Modifié par VelvetSmoke (19 Jul 2013 - 11:28)