Discussion :

[mouls22]

Bonjour, je sollicite votre aide car j'ai mon slider qui dépasse comme vous pouvez le constater dans la photo.



J'ai essayé d'ajouter une div boite à l'intérieur de la div slider et cacher les images qui dépassent avec un overflow: hidden; . Voici mon 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
.container {
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
}
 
.slider img {
  max-width: 500px;
  display: none;
}
 
.boite {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

mon PHP:

Code php :

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

1
2
3
4
5
6
7
8
echo ' <div class="slider" >';
    foreach ($images as $img) {
      echo ' <div class="boite" >';
      echo '<img class ="active" style="width:300px; height:200px;" src="' . $img . '">';
      echo "</div>"; // fin div boite . 
 
    }
    echo "</div>"; // fin div slider

[NoSmoking]

Bonjour,

car j'ai mon slider qui dépasse comme vous pouvez le constater dans la photo.

... franchement pas clair du tout !!

Le overflow:hidden devrait être sur l'élément <div class="slide">, sous réserve que j'ai bien compris !

[mouls22]

Bonjour NoSmoking,
Je cherche à ce que la photo d'en bas ne soit pas visible, uniquement lorsqu'on change avec le bouton droit (en cliquant).
Donc en te suivant, j'ai fait ainsi mais sans résultats:

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
.slider img {
  max-width: 500px;
  display: none;
  overflow: hidden;
}
 
.boite {
  width: 100%;
  height: 200px;
}
 
img.active {
  display: block;
  animation: fade 0.8s;
}

[NoSmoking]

Sur une base bien plus simple

Code html :

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

1
2
3
4
5
6
<div class="slider">
  <img src="image_001.jpg" alt="">
  <img src="image_002.jpg" alt="">
  <img src="image_003.jpg" alt="">
  <img src="image_004.jpg" alt="">
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.slider img {
  display: block;
  width: 300px;
  height: 200px;
}

Nota : les height et width ne sont pas toutes nécessaire, à toi d'adapter.

Regarde pas curiosité :

↪ Diaporama en 3 lignes de code

[mouls22]

Nickel!! Grand Merci NoSmoking. Il fallait également que j'invoque slider en lui attribuant un height, alors que j'avais invoqué uniquement slider img.
Voici ce que j'ai fait pour que ça marche, si ça peut aider des gens plus tard:

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
.container {
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
}
 
.slider {
  width: 500px;
  height: 200px;
  overflow: hidden;
}
 
.slider img {
  max-width: 500px;
  display: none;
}

Merci encore