Bonjour à toutes et tous !

Voilà je suis en train de faire un diaporama avec défilement des images de la gauche vers la droite, ce n'est pas la 1ère fois que je fais ce genre de chose et je procède toujours de la même manière :
1. je créer une div <div id="imagesbox"> ou je place mes images : chaque <img> l'une après l'autre dans le sens du défilement;
2. j'applique un attribut css "float: left;" à mes images pour quelles soit positionnées l'une à côté de l'autre;
3. j'applique <div id="imagesbox"> une largeur css "width" dont la valeur est égale à la largeur des images multipliée par le nombre d'image (les images ayant toute la même largeur);
4. je place le tout dans une <div id="slider"> parente dont la largeur css "width" est égale à la largeur d'une seul image ainsi qu'un "overflow:hidden;" pour cacher ce qui dépasse;
5. je déplace mes images en appliquant dynamiquement (via mon pote jquery) une "margin-left" négative sur <div id="imagesbox">;

Jusqu'ici tous va bien, mais cette fois j'aimerais m'autoriser une petite originalité en rendant visible ce qui dépasse à gauche et à droite.
Tout de go et plein d’enthousiasme j'applique les attributs css "overflow-x: visible;" et "overflow-y: hidden;" à ma div parente <div id="slider"> (point 4).

C'est là que ça se gâte, plutôt que d’afficher ce qui déborde, le navigateur (tous les navigateurs de FF à Safari et les autres...) affiche une scrollbar comme si j'avais mis "overflow-x: scroll;",
par contre ce qui dépasse en hauteur est bien caché...

Voici le code de tout ça :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS Div parente */
div#slider {
	width: 1200px;
	height: 600px;
	display: block;
	margin: auto;
	overflow-x: visible;
        overflow-y: hidden;
 
        position: relative;
}
/* CSS des images */
div#imagesbox > img {
	width: 1200px;
	float: left;
	opacity: 0.5;
}

Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slider">
	<span id="sliding-prev">prev</span>
	<div id="imagesbox">
		<img id="slide1" class="first-slide" src="/images/Chrysanthemum.jpg" />
		<img id="slide2" src="/images/Desert.jpg" />
		<img id="slide3" src="/images/fauve.jpg" />
		<hr class="clear" />
	</div>
	<div class="text-box">
		inutilisé pour l'instant
	</div>
        <span id="sliding-next">next</span>
</div>

EDIT : Ajout de l'attribut position à div#slider qui ne fais rien avancer...

Merci d'avance pour votre aide et très bonne journée !

Mickael