Discussion :

[NiamorH]

Bonjour,

je suis très peu expérimenté en HTML/CSS.

Je souhaite faire un carrousel de miniatures, "thumbnails", qui défilent de gauche à droite et vice-versa.

Mon problème est que les images sont toujours visibles même si elles dépassent des limites de mon carrousel. Est-il possible de les clipper?

Ci-dessous mon HTML/CSS.

Code HTML :

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" class="content">
        <ul>
         <li><a href="#"><img src="img/nada/p1020115.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020116.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020118.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020243.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020115.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020116.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020118.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020243.jpg"/></a></li>
         <li><a href="#"><img src="img/nada/p1020115.jpg"/></a></li>
        </ul>
      </div>

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
18
19
20
21
22
23
24
25
#slider ul, #slider li
{
  margin:0;
  padding:0;
  list-style:none;
}
 
#slider, #slider ul
{
  background-color:#FF0000;
  width:738px;
  height:120px;
  overflow:hidden;
}
 
#slider img
{
  height:100px;
}
 
#slider li
{
  display: inline;
  position:absolute;
}

Les images sont toutes les unes sur les autres et j'utilise javascript pour les déplacer en jouant sur le margin-left.

Si je pars dans une mauvaise direction ou que quelqu'un a une solution plus logique, n'hésitez pas à me l'indiquer, merci.

[NoSmoking]

Bonjour,
mets un overflow:hidden sur la DIV conteneur.

[NiamorH]

Salut et merci de ta réponse,
ma div conteneur est #slider et j'ai déjà un overflow:hidden dessus dans mon code CSS. Je pense que la position:absolute pose problème.

En y repensant, je me dis que mon approche n'est pas terrible car si l'utilisateur a désactivé javascript, il verra toutes les images les unes au dessus des autres et mon carrousel sera inutilisable. Je pense donc utiliser une autre approche avec des float:left qui permettrait de laisser le carrousel fonctionnel dans ce cas :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#slider
{
  width:738px;
  text-align:left;
  height:120px;
  background-color:#FF0000;
 
  /* Added by javascript to clip images
     to slider boundaries.
  overflow:hidden;*/
}
 
#slider ul
{
  margin:0;
  padding:0;
  list-style:none;
 
  /* Computed and added by javascript
     to fit all images on same row.
  width:3000px;*/
}
 
#slider li
{
  display:inline;
  margin:10px 5px;
  float:left;
}
 
#slider img
{
  height:100px;
}