Discussion :

[Brian35]

Bonjour à tous,

Voilà, grâce à un tutoriel, j'ai réalisé un slider qui fonctionne très bien.
Cependant je n'arrive pas à le positionner comme je le voudrais.

En effet j'aimerais avoir un positionnement de ce type :



J'ai le code CSS de mon slider et la structure HTML.

CSS :

Code :

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
.jThumbnailScroller{position:relative; width:670px; height:80px; margin:160px auto 0 auto; border:5px solid #eee; background:#535355; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.jThumbnailScroller .jTscrollerContainer{position:absolute;}
.jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline;}
.jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;}
.jThumbnailScroller .jTscrollerNextButton{background:#000 url(../images/nextArrow.png) center center;}
.jThumbnailScroller .jTscrollerPrevButton{background:#000 url(../images/prevArrow.png) center center;}
.jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#e42832; opacity:1;}
.jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.jThumbnailScroller .jTscroller a:hover{border-color:#fff;}
.jThumbnailScroller .jTscroller a:first-child{margin-left:10px;}
.jThumbnailScroller .jTscroller a img{border:none;}
.jThumbnailScroller#tS2{margin:30px auto;}
.jThumbnailScroller#tS2 .jTscroller a{opacity:0.7;}
.jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;}
.jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:0; top:50%;}
.jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:0; top:50%;}

HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="tS2" class="jThumbnailScroller">
	<div class="jTscrollerContainer">
		<div class="jTscroller">
			<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
			<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
		<a href="#"><img src="http://www.opticien-regards.fr/images/Common/dg.png" /></a>
		</div>
	</div>
	<a href="#" class="jTscrollerPrevButton"></a>
	<a href="#" class="jTscrollerNextButton"></a>
</div>

Comment je dois m'y prendre ?
J'ai essayé de mettre un float:left mais le slider ne marche plus après (le système de flèche non cliquable...).

[NoSmoking]

Bonjour,
il te manque un conteneur pour recevoir l'image que tu souhaites afficher dans la DIV id="tS2".