Erstelle eine atemberaubende Swiper-Carousel-Web-App

Einführung

In diesem Projekt lernst du, wie du eine Swiper-Carousel-Webanwendung erstellst, die ein visuell ansprechendes Carousel-Layout mit kosmos-thematischem Inhalt aufweist. Die App wird Benutzern ermöglichen, durch verschiedene Slides zu navigieren und Karten mit interessanten Fakten über das Universum anzusehen.

Hier ist eine Vorschau der Swiper-Carousel:

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du das HTML-Gerüst für die Webanwendung konstruierst
Wie du die Swiper-Carousel in die HTML-Struktur einbettest
Wie du Kreise und animierte schwebende Kreise in den Hintergrund der App hinzufügst
Wie du grundlegende CSS-Resets implementierst, um eine einheitliche Gestaltung über verschiedene Browser zu gewährleisten
Wie du den Hauptabschnitt und den Inhaltshalter der App gestaltest
Wie du schwebende Kreise im Hintergrund entwirfst und animierst
Wie du die Swiper-Carousel und ihre Komponenten gestaltest
Wie du die Swiper-Carousel mit JavaScript initialisierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Eine visuell ansprechende Swiper-Carousel-Webanwendung mit kosmos-thematischem Inhalt zu erstellen
Die HTML-Struktur und das Layout für die Webanwendung zu implementieren
CSS-Gestaltung und -Animationen anzuwenden, um die Benutzeroberfläche zu verbessern
JavaScript zu nutzen, um die Swiper-Carousel zu initialisieren und zu konfigurieren

Baue das HTML-Gerüst

Anforderung:

Füge essentielle Metatags ein, um die Zeichensatz- und Viewport-Einstellungen zu definieren.
Verknüpfe externe Stylesheets und Skripte.

Funktionalität:

Generiere ein grundlegendes HTML-Layout, auf dem du aufbauen kannst.

Schritte:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swiper Carousel</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
    />
  </head>
  <body>
    <!-- partial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <!-- Wir werden unsere Swiper-Carousel-Struktur hier einfügen -->
    <!-- Skripte: Swiper-Bibliothek und unsere benutzerdefinierte Logik -->
    <script src="./script.js"></script>
  </body>
</html>

✨ Lösung prüfen und üben

Füge die Swiper-Carousel in das HTML ein

Anforderung:

Ein struktureller Platz innerhalb des HTML, um den Inhalt unserer Carousel aufzunehmen.
Pagination-Elemente für die Navigation.

Funktionalität:

Füge ein Carousel-Layout ein, das gestaltet und interaktiv gemacht werden kann.

Schritte:

Füge dies innerhalb des <body>-Tags in index.html hinzu:

<section>
  <div class="content">
    <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="card">
              <h1>Kosmischer Ballett</h1>
              <p>
                Das Universum ist nicht nur eine riesige Finsternis; es ist eine
                dynamische Bühne für das kosmische Ballett. Galaxien tanzen,
                Sterne entstehen und sterben, und Schwarze Löcher wandern, alles
                regiert von der zeitlosen Rhythmus der Gravitationskräfte.
              </p>
              <button class="read-more">Weiterlesen</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Dunkle Geheimnisse</h1>
              <p>
                Trotz all seiner leuchtenden Sterne und Galaxien verbirgt das
                Universum mehr als es offenbart. Dunkle Materie und dunkle
                Energie, unsichtbar und mysteriös, machen 95% des Universums aus
                und halten das Weltall zusammen und treiben seine Expansion.
              </p>
              <button class="read-more">Weiterlesen</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Die Relativität der Zeit</h1>
              <p>
                Im riesigen Kosmos ist die Zeit relativ. In der Nähe massiver
                Objekte wie Schwarze Löcher scheint die Zeit zu verlangsamen.
                Was dort wie Minuten vorkommt, könnte an anderer Stelle Jahren
                entsprechen, was das Universum zu einem Theater der
                Zeitelastizität macht.
              </p>
              <button class="read-more">Weiterlesen</button>
            </div>
          </div>
        </div>
        <!-- Füge die Pagination hinzu -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

✨ Lösung prüfen und üben

Füge die Kreise in das HTML ein

Anforderung:

Um viele runde Blasen zu erhalten, füge <ul> und <li> hinzu.

Funktionalität:

Viele Blasen unterschiedlicher Größen werden im Hintergrund der Seite animiert.

Schritte:

<section>
  <!--swiper content...-->
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>

✨ Lösung prüfen und üben

Implementiere grundlegende CSS-Resets

Anforderung:

Erreiche einen einheitlichen Look über verschiedene Browser.
Setze die Browser-Standard-Margen, Padding und Box-Dimensionen zurück.

Funktionalität:

Aufhebe alle Browser-Standard-Stile, um sicherzustellen, dass unsere Gestaltung über verschiedene Browser hinweg konsistent bleibt.

Schritte:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

✨ Lösung prüfen und üben

Styliere den Hauptabschnitt und den Inhaltscontainer

Anforderung:

Ein Hauptabschnitt, der die gesamte Ansichtsoberfläche einnimmt.
Ein visuell ansprechender Inhaltscontainer mit bestimmten Abmessungen und Gestaltung.

Funktionalität:

Style den Hauptabschnitt und den Inhaltscontainer, sodass beide zentriert ausgerichtet sind und einen kosmos-thematischen Anschein erhalten.

Schritte:

section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7883a1;
  min-height: 100vh;
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(30px);
  border-radius: 20px;
  width: min(900px, 100%);
  z-index: 10;
}

✨ Lösung prüfen und üben

Entwerfe animierte schwebende Kreise

Anforderung:

Ein dynamischer Hintergrund für den Hauptabschnitt.
Schwebende Kreise, die sich über die Zeit bewegen und ihren Aussehen ändern.

Funktionalität:

Bereiche den Hintergrund mit animierten, verlaufsförmigen Kreisen, die schweben, rotieren und ihre Transparenz ändern, um die Benutzerbindung zu erhöhen.

Schritte:

.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background-color: #0f75c3;
  background-image: linear-gradient(
    225deg,
    #67d0f6 0%,
    #a7ec67 50%,
    #c27ee4 100%
  );
  animation: animate 10s linear infinite;
  bottom: -150px;
}

.circles li:nth-child(1) {
  left: 25%;
  width: 50px;
  height: 50px;
  animation-delay: 0s;
}

.circles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 10s;
}

.circles li:nth-child(3) {
  left: 70%;
  width: 30px;
  height: 30px;
  animation-delay: 4s;
}

.circles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 15s;
}

.circles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6) {
  left: 75%;
  width: 25px;
  height: 25px;
  animation-delay: 3s;
}

.circles li:nth-child(7) {
  left: 35%;
  width: 80px;
  height: 80px;
  animation-delay: 7s;
}

.circles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 35s;
}

.circles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}

.circles li:nth-child(10) {
  left: 85%;
  width: 40px;
  height: 40px;
  animation-delay: 0s;
  animation-duration: 10s;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 100%;
  }

  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 100%;
  }
}

✨ Lösung prüfen und üben

Styliere den Swiper-Carousel

Anforderung:

Eine benutzerfreundliche Carousel-Struktur.
Stylische Slides und Inhaltskarten, die einfach zu bedienen sind.

Funktionalität:

Verzierte den Swiper-Carousel und seine Komponenten, um sicherzustellen, dass sie responsiv, intuitiv und ästhetisch ansprechend sind.

Schritte:

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  /* Angepasst, um die volle Breite seines Containers einzunehmen */
  height: 600px;
  /* Angepasste Höhe */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Angepasst, um die meiste Breite seines Containers einzunehmen */
  height: 80%;
  /* Angepasst, um die meiste Höhe seines Containers einzunehmen */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Angepasst, um die volle Breite zu einnehmen */
  height: 100%;
  /* Angepasst, um die volle Höhe zu einnehmen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Zentriere den Karteneinhalt vertikal */
}

.card h1 {
  margin-bottom: 20px;
  font-size: 1.5em;
  color: #fff;
}

.card p {
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.8);
}

.read-more {
  background-color: #6bd6ee;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: #fff;
  padding: 15px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.read-more:hover {
  background-color: #9bd92f;
}

✨ Lösung prüfen und üben

Initialisiere den Swiper-Carousel

Anforderung:

Ein Carousel, das auf Benutzereingaben reagiert.
Glatte Übergänge zwischen den Slides.
Funktionale Seitennummerierung für die Navigation.

Funktionalität:

Verwende JavaScript, um dem Swiper-Carousel Leben einzuhauchen und dynamische Übergänge und Navigation zwischen den Inhaltskarten zu ermöglichen.

Schritte:

const swiper = new Swiper(".swiper-container", {
  speed: 400,
  spaceBetween: 100,
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});

✨ Lösung prüfen und üben

Starte die App

Öffne index.html in einem Webbrowser.
Teste die Anwendung, indem du Ausgaben hinzufügst und überprüfst, ob die Ausgabenliste und die Zusammenfassung korrekt aktualisiert werden.
Der Effekt der Seite ist wie folgt:

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Du hast jetzt von Grund auf einen wunderschönen Swiper-Carousel erschaffen. Dieses Projekt hat dich durch die Schritte geführt, um die erforderlichen Dateien einzurichten, eine HTML-Struktur zu schmieden, detaillierte CSS-Stile einzufügen, JavaScript-Magie zu verleihen und schließlich das Projekt zu starten. Fühle dich frei, auf dieser Grundlage weiterzuentwickeln, indem du mehr Slides hinzufügst, das Design anpasst oder zusätzliche Swiper-Funktionen hinzufügst. Bleib glänzend und viel Spaß beim Programmieren!