Html/CSS/Javascript Website Bild wird nicht angezeigt?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, programmieren
04.07.2021, 21:40

Ich würde eine Bildergallerie nicht so lösen. Bei jeder Änderung durch alle Bildelemente zu iterieren, ist unnötig ressourcenfressend. Des Weiteren würde ich dazu raten, auf Inline-Styles zu verzichten und die Stylesheets stattdessen zu den anderen dazu zu packen.

Im Übrigen finde ich es nicht schön, dass du deinen Code hier einfach so, ohne Formatierung oder Trennung hineinfledderst. Möchtest du in Zukunft auch Antworten in dieser Form erhalten?

Die HTML-Struktur kann man so lösen:

<figure id="main-slide">
  <img alt="..." src="...">
  <figcaption>...</figcaption>
</figure>
<nav class="slidenavigation">
  <button id="previous-slide">Previous</button>
  <ul class="slidenavigation-dots">
    <li>
      <img alt="..." data-slide="0" role="button" src="...">
    </li>
    <li>
      <img alt="..." data-slide="1" role="button" src="...">
    </li>
    <li>
      <img alt="..." data-slide="2" role="button" src="...">
    </li>
    <!-- etc. ... -->
  </ul>
  <button id="next-slide">Next</button>
</nav>

Es gibt also nur ein Element für die große Anzeige des derzeitigen Slides. Darunter liegt eine Auflistung der Dot-Navigation. Jeder Navigationspunkt verfügt über seinen Index (in data-slide). Bildpfad und -beschreibung werden bei Selektion auf die Elemente im main-slide übertragen.

Bezüglich des Stylings liste ich nur ein paar notwendige Selektoren auf. Weitere Details (z.B. die visuelle Gestaltung der Buttons) überlasse ich dir.

.slidenavigation {
  display: flex;
}

.slidenavigation-dots {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.slidenavigation-dots > li {
  margin: 2px;
  width: 50px;
}

#main-slide > img,
.slidenavigation-dots > li > img {
  width: 100%;
}

Diese Stylesheets sorgen größtenteils für die horizontale Ausrichtung und Skalierung der Navigationspunkte unter dem Slider.

Der interessanteste Teil liegt natürlich im JavaScript. Zunächst werden die notwendigen Elemente ermittelt, die je Selektionsvorgang benötigt werden.

const mainSlide = document.getElementById("main-slide");
const mainSlideImage = mainSlide.querySelector("img");
const mainSlideCaption = mainSlide.querySelector("figcaption");
const slideDots = document.querySelectorAll(".slidenavigation-dots img");

Außerdem braucht es eine Variable, die sich den aktuellen Index merkt. Die Variable bezüglich der Anzahl an Slides ist nur ein Code-Verkürzer.

let currentSlideIndex = 0;
const numberOfSlides = slideDots.length;

Für die Selektion eines Slide wird eine Funktion definiert. Diese setzt einmal den aktuellen Slide-Index (der Wert muss geparst werden!) und verwendet dann (wie schon oben erwähnt) die Attribute alt und src, um Bildpfad, -beschreibung und Bildunterschrift des ersten Bilds zu setzen.

function showSlide(slide) {
  currentSlideIndex = parseInt(slide.dataset.slide) || 0;

  const caption = slide.getAttribute("alt");
  mainSlideImage.setAttribute("alt", caption);
  mainSlideImage.src = slide.src;
}

Damit die Navigationspunkte selbst eine Selektion ermöglichen, werden sie einmal initial mit Listeners (für das click-Event) ausgestattet.

for (const dot of slideDots) {
  dot.addEventListener("click", evt => showSlide(evt.target));
}

Dann fehlen nur noch die Aktionen für die Buttons Previous und Next. Diese würden natürlich immer nur den aktuellen Index um 1 nach oben / unten zählen. Allerdings muss sichergestellt werden, dass der Index in seinem erlaubten Wertebereich bleibt (0 <= index < Anzahl an Slides). Wenn er nach rechts überläuft, muss er wieder auf 0 gesetzt werden, damit die Gallerie wieder von vorn beginnt. Wenn er nach links überläuft, muss er ans Ende springen. Ebenso sollte auf den Fall, dass ein data-slide-Wert invalid war, reagiert werden können.

Deshalb wäre zunächst eine Funktion für die Validation sinnvoll.

function getValidatedSlideIndex(index) {
  if (index < 0) {
    return numberOfSlides - 1;
  }

  if (index >= numberOfSlides) {
    return 0;
  }

  return index;
}

Wenn den beiden Buttons ihre Listener angehängt werden, wird die oben definierte Funktion eingesetzt.

document.getElementById("previous-button").addEventListener("click", function() {
  currentSlideIndex = getValidatedSlideIndex(currentSlideIndex - 1);
  showSlide(slideDots[currentSlideIndex]);
});

document.getElementById("next-button").addEventListener("click", function() {
  currentSlideIndex = getValidatedSlideIndex(currentSlideIndex + 1);
  showSlide(slideDots[currentSlideIndex]);
});
Kur0mi
04.07.2021, 08:16

Ist das Problem jetzt nur, dass die Bilder nicht angezeigt werden? Sind die denn im selben Ordner wie die HTML-Datei?
Thoss 
Fragesteller
 04.07.2021, 08:19

Nein das Problem ist, dass das erste Bild nicht direkt angezeigt wird sondern erst nachdem man das kleine Bild anklickt. Das liegt am Javascript doch ich weiß nicht wo der Fehler liegt.

0
Kur0mi  04.07.2021, 08:52
@Thoss

Alle Bilder, oder nur das erste Bild? Sonst könntest du das script auch in html umschreiben und die Bilder mit dem p tag trennen, dann mit css zentrieren. Text kann man dann rechts einfügen mit div. Ist jetzt nur auf die Schnelle eine Lösung, würde mir das script später mal aber genauer anschauen.

1