Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?
Guten Tag liebe Community,
ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?
- Beim ersten <img>: picture1.jpg.jpg
- Beim zweiten <img>: picture2.jpg.jpg
- Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name
Welche Lösungen gibt es für dieses Problem?
Hier der wichtigste (Teil-)Code:
Der CSS-Code:
.Slider {
width: 800px;
height: 500px;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
HTML-Code (ein Teil):
<div class="Slider">
<div class="Slides">
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<div class="slidefirst">
<img src="picture1.jpg.jpg" alt="" width="160" height="145" />
</div>
<div class="slidesecond">
<img src="picture2.jpg.jpg" alt="" width="160" height="145" />
</div>
<div class="slidethird">
<img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
</div>
<div class="navigation auto">
<div class="auto-btn-1"></div>
<div class="auto-btn-2"></div>
<div class="auto-btn-3"></div>
</div>