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>
Man kann es sich zwar denken, du hast aber mehrere verschiedene Sprachen/Themen angegeben. Worum geht es überhaupt?
Um einen Slider Caroussel, den ich gerade baue
Wie wärs wenn du die Code Formatierung benutzt? Ist ja schrecklich das so lesen zu müssen.
Wie ?
2 Antworten
Durch das overflow-Property wird nur der Inhalt versteckt, der tatsächlich überlappt bzw. die Containergröße überschreitet. Letzteres trifft auf deine Elemente jedoch nicht zu:
- In der Breite belegen die Bilder mit 160px den meisten Platz im Container.
- In der Höhe kommst du bei den Bildern auf eine Gesamthöhe von 435px (145 * 3). Dies addiert mit den anderen Elementen im Container ergibt eine ungefähre Höhe von 460px.
Damit der Slider nur ein Bild auf einmal anzeigt, müssten entweder alle nicht-aktiven Bilder explizit ausgeblendet werden (a) oder du listest sie in einem erneut größenbeschränkenden Container auf (b).
Für Lösung a wäre es einfacher, die Bildboxen mit einer gemeinsamen Klasse auszustatten und die aktive Bildbox mit einer active-Klasse zu kennzeichnen.
HTML:
<div class="slide active"><!-- image 1 --></div>
<div class="slide"><!-- image 2 --></div>
<div class="slide"><!-- image 3 --></div>
CSS:
.slide { display: none }
.slide.active { display: block }
Um den Slide zu wechseln, müsstest du dann via JavaScript (o.ä.) die active-Klasse immer wieder neu zuordnen.
const slides = document.querySelectorAll(".slide");
const slideControls = document.querySelectorAll(".Slides [name=radio-btn]");
let activeSlide = slides[0];
for (let index = 0; index < slideControls.length; ++index) {
slideControls[index].addEventListener("click", evt => {
activeSlide.classList.remove("active");
activeSlide = slides[index];
activeSlide.classList.add("active");
});
}
Für Lösung b wiederum bräuchtest du wie erwähnt einen extra Container.
HTML:
<div class="inner-slide-boxes">
<div class="slidefirst"><!-- ... --></div>
<div class="slidesecond"><!-- ... --></div>
<div class="slidethird"><!-- ... --></div>
</div>
CSS:
.inner-slide-boxes {
height: 145px;
overflow: hidden;
width: 160px;
}
Auf den Seiten des W3C findest du übrigens auch ein Tutorial für eine nutzerfreundlichere Umsetzung eines Carousels (Demo). Es erfordert zwar sicherlich auch einige Anpassungen, könnte dir jedoch trotzdem etwas Aufwand bei der Umsetzung eines Sliders einsparen. Voraussetzung wären gute JavaScript-Grundlagenkenntnisse (neben HTML und CSS).
Nein, das liegt nicht an dem Namen.
Ein overflow hidden ist da gar nicht im angehängten Code, daher kann ich dir auch nicht sagen, wie es richtig wäre