Das Gewächshaus: Ein Slider mit Swiper.js

Mit Swiper.js lassen sich moderne, responsive Slider für Bilder, Inhalte oder Galerien einfach umsetzen. Hier lernst du Schritt für Schritt, wie du Swiper in dein Projekt integrierst.

Schritt-für-Schritt: Swiper einbinden

  1. Swiper CSS einbinden: Füge im <head> deiner Seite folgende Zeile ein:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>

    HTML

  2. Swiper JS einbinden: Direkt vor dem schließenden </body> einfügen:

    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

    HTML

  3. HTML-Struktur für den Slider anlegen: Baue das Grundgerüst deines Sliders. Jede .swiper-slide ist ein Slide, das du mit Inhalt füllen kannst:

    <div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

    HTML

  4. Swiper initialisieren: Füge in deiner script.js oder in einem eigenen Skript folgenden Code ein:

    const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

    JS

  5. Slides mit Bildern und Beschreibung: Jede .swiper-slide kann beliebigen Inhalt enthalten, z.B. ein Bild mit <figcaption>:

    <div class="swiper-slide">
  <figure>
    <img src="beispiel.jpg" width="400" height="300" alt="Beschreibung">
    <figcaption>Bildbeschreibung</figcaption>
  </figure>
</div>

    HTML

  6. Basis-Styles für Swiper ergänzen: Ergänze in deiner style.css:

    .swiper {
  width: 100%;
  max-width: 600px;
  height: 320px;
  margin: 2rem auto;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5em;
}
.swiper-slide img {
  width: 200px;
  height: auto;
  border-radius: 1em;
}

    CSS

  7. Weitere Anpassungen: Passe Farben, Navigation und Slides nach deinen Wünschen an. Die Swiper-Dokumentation bietet viele Beispiele.