HTML: Slideshow erstellen - So gehts

Eine Slideshow ist eine großartige Möglichkeit, um Bilder oder Informationen auf einer Webseite zu präsentieren. Du möchtest vielleicht deine Fotografien zeigen oder deine Produkte in einem Onlineshop präsentieren. In diesem Beitrag werde ich dir eine Schritt-für-Schritt-Anleitung geben, wie du mit HTML eine Slideshow erstellen kannst.

Schritt 1: HTML-Grundgerüst erstellen

Öffne deinen bevorzugten Texteditor und erstelle ein neues HTML-Dokument. Füge den folgenden Code ein, um das Grundgerüst zu erstellen:

<!DOCTYPE html>
<html>
<head>
  <title>Meine Slideshow</title>
  <style>
    .slideshow { position: relative; width: 100%; height: 400px; }
    .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; }
    .slide.active { opacity: 1; }
  </style>
</head>
<body>
  <div class="slideshow">
    <div class="slide active"><img src="bild1.jpg" alt="Bild 1"></div>
    <div class="slide"><img src="bild2.jpg" alt="Bild 2"></div>
    <div class="slide"><img src="bild3.jpg" alt="Bild 3"></div>
  </div>

  <script>
    var slides = document.querySelectorAll(".slide");
    var currentSlide = 0;
  
    function showSlide() {
      slides[currentSlide].classList.remove("active");
      currentSlide = (currentSlide + 1) % slides.length;
      slides[currentSlide].classList.add("active");
    }
  
    setInterval(showSlide, 3000); // Wechselt alle 3 Sekunden das Bild
  </script>
</body>
</html>

Schritt 2: Bilder hinzufügen

Ersetze die Beispielbilder „bild1.jpg“, „bild2.jpg“ und „bild3.jpg“ mit deinen eigenen Bildern. Du kannst weitere Bilder hinzufügen, indem du einfach neue

Tags mit der Klasse „slide“ erstellst und den Bildpfad anpasst.

Schritt 3: Slideshow-Übergänge anpassen (optional)

Du kannst die Übergänge zwischen den Folien anpassen, indem du den Wert von „transition“ in der CSS-Klasse „.slide“ änderst. Standardmäßig ist der Wert auf „opacity 1s ease-in-out“ eingestellt, was bedeutet, dass die Folien eine Sekunde lang überblenden. Du kannst dies anpassen, um verschiedene Effekte zu erzielen.

Schritt 4: Slideshow testen

Speichere das HTML-Dokument und öffne es in einem Webbrowser. Du solltest eine Slideshow sehen, die automatisch alle 3 Sekunden zum nächsten Bild wechselt.

Ergebnis

Meine Slideshow

Herzlichen Glückwunsch! Du hast erfolgreich eine Slideshow in HTML erstellt. Du kannst diese Anleitung verwenden, um weitere Verbesserungen vorzunehmen, zum Beispiel das Hinzufügen von Navigationselementen oder die Anpassung des Slideshow-Intervalls. Viel Spaß beim Erstellen deiner Slideshow!

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

html html slideshow