4 sur 9 images apparraissent dans mon slideshow

bonjour, j'ai un probleme je n'arrive pas a faire defiler les 9 images de mon slideshow aidez moi svp.

Bonjour,

Sans code ça risque d'être compliqué...

voici mon code css aidez moi svp

#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
/*-- CSS3 --*/
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;

-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
/*-- Ombrage CSS3 --*/
#slideshow:before,
#slideshow:after {
position: absolute;
bottom:16px;
z-index: -10;
width: 50%;
height: 20px;
content: " ";
background: rgba(0,0,0,0.1);

-webkit-border-radius: 50%;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
-moz-border-radius: 50%;
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
border-radius: 50%;
box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
left:0;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
#slideshow:after {
right:0;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}

/*-- etape 2 --*/

#slideshow .container {
position:relative;
width: 640px;
height: 310px;
overflow: hidden;
}
#slideshow .container:after {
position:absolute;
bottom: 0; left:0;
content: " ";
width: 100%;
height: 1px;
background: #999;
}
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
/* ... avec la propriété animation */
-webkit-animation: slider 32s infinite;
-moz-animation: slider 32s infinite;
animation: slider 32s infinite;
}
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
#slideshow figure:after {
position: absolute;
display:block;
content: " ";
top:0; left:0;
width: 100%; height: 100%;
-webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
-moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

/*-- etape 3 --*/

#slideshow figcaption {
position:absolute;
left:0; right:0; bottom: 5px;
padding: 20px;
margin:0;
border-top: 1px solid rgb(225,225,225);
text-align:center;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #fff;
background: rgba(255,255,255,0.7);
color: #555;
text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}

/*-- animation --*/
@-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}

@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}

@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}

/*-- animation 1 --*/


/*-- animation 1 --*/

#timeline {
position: absolute;
background: #999;
bottom: 15px;
left: 15px;
height: 1px;
background: rgb(214,98,13);
background: rgba(214,98,13,.8);
width: 0;
/* fonction d'animation */
-webkit-animation: timeliner 32s infinite;
-moz-animation: timeliner 32s infinite;
animation: timeliner 32s infinite;
}


/*-- keyframes--*/


@-webkit-keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@-moz-keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% { width: 0; }
20%, 45%, 70%, 90% { width: 640px; }
}


@-webkit-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 5px; }
}
@-moz-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 5px; }
}
@keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% { bottom: -55px; }
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% { bottom: 5px; }
}




#slideshow figcaption {
/* ... la propriété animation */
-webkit-animation: figcaptionner 32s infinite;
-moz-animation: figcaptionner 32s infinite;
animation: figcaptionner 32s infinite;
}

Bonjour,

Le problème ne provient pas forcément du code css... et du côté php ça donne quoi ? Vous êtes sous WordPress ? Comment sont sélectionnés les images ?

Moi par exemple, quand j'ai créé mon slide pour WordPress, j'ai paramètré mon slide pour qu'il n'affiche que les articles "mis en avant", une fonction native de wordpress. Ce qui n'empêche pas d'ajouter une limitation sur le nombre maximum d'articles mis en avant dans le slide.

S'il est bien réalisé, votre plugin a certainement un paramètrage comparable, WordPress ou pas.