HTML/CSS: Wie kann ich diesem Slider einen Text hinzufügen?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, programmieren, CSS
18.02.2021, 05:46

Der Slider hat je Slide ein a-Element:

<a class="slide" href=""><!-- img ... --></a>

In diesem kannst du jeweils ein figure-Element hineinpacken:

<figure>
  <div class="slide-img">
    <img alt="Bildbeschreibung" src="http://placehold.it/705x470" />
  </div>
  <figcaption>Text</figcaption>
</figure>

Beachte zwei Änderungen an dem img-Element. Das alt-Attribut habe ich noch ergänzt, denn wenn es fehlt, wäre dies ein Markupfehler. Sein Zweck ist es, das Bild kurz und prägnant zu beschreiben.

Die Placeholderadresse habe ebenfalls geändert. Das Bild würde nun ja andere Ausmaße annehmen.

Im CSS-Teil fliegt dieser Selektor raus:

.slide img {
  width: 25%;
  float: left;
}

Stattdessen kommen diese hinzu:

.slide > figure {
  display: flex;
  float: left;
  margin: 0;
  padding: 0;
  width: 25%;
}

.slide figcaption {
  background: white;
  box-sizing: border-box;
  padding: 20px 10px;
  width: 235px; /* ~ 25% */
}

.slide .slide-img {
  width: 705px; /* ~ 75% */
}

Die einzelnen Breitenangaben kannst du für dich nach Belieben noch anpassen.

Nun bliebe nur noch das Problem mit der Bildgröße. Nach derzeitigem Stand müsste es passend zurechtgeschnitten werden oder man skaliert es auf seine richtige Breite 

.slide .slide-img img { width: 100% }

und positioniert es dann vertikal mit der Flexbox nach Belieben.

Man könnte es aber auch mit object-fit skalieren lassen (dann würde ich die oben in den Kommentaren angemerkten Prozentzahlen auch verwenden). Alternativ könnte man auf den div.slide-img-Elementen das Bild als Hintergrundbild setzen und das Skalierverhalten mit background-size definieren.

<div class="slide-img" style="background-image:url('http://placehold.it/705x470')"></div>

Der Unterschied zu vorher genanntem Property ist der, dass diese Lösung auch noch im IE 11 unterstützt werden würde.
youllknow 
Beitragsersteller
 18.02.2021, 15:44

vielen Dank! Was müsste ich dem Code hinzufügen, damit sich das Bild alle 10 sek ändert?

regex9  18.02.2021, 16:21
@youllknow

Füge einen script-Tag unter dem Slider ein, der dieses Skript einbindet:

const slideChecks = document.getElementsByClassName("control");
let currentSlideIndex = 0;

setInterval(function() {
  slideChecks[currentSlideIndex].checked = false;
  
  if (currentSlideIndex === slideChecks.length - 1) {
    currentSlideIndex = -1;
  }

  slideChecks[++currentSlideIndex].checked = true;
}, 10 * 1000);

Das Intervall wird in Millisekunden angegeben. Daher zur Übersichtlichkeit die Rechnung 10 * 1000.