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:

Swiper carousel preview

🎯 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

Bau 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>

Integriere die Swiper-Carousel in das HTML

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>

Integriere die Kreise in das HTML

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>

Implementierung von grundlegenden 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;
}

Gestalten des Hauptabschnitts und des Inhaltshalters

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;
}

Entwerfen von animierten schwebenden Kreisen

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%;
  }
}

Gestalten des Swiper-Carousels

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;
}

Initialisierung des Swiper-Carousels

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
  }
});

Ausführen der 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:

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!

Erstelle eine Swiper-Carousel-Web-App

Einführung

🎯 Aufgaben

🏆 Errungenschaften

Bau das HTML-Gerüst

Integriere die Swiper-Carousel in das HTML

Integriere die Kreise in das HTML

Implementierung von grundlegenden CSS-Resets

Gestalten des Hauptabschnitts und des Inhaltshalters

Entwerfen von animierten schwebenden Kreisen

Gestalten des Swiper-Carousels

Initialisierung des Swiper-Carousels

Ausführen der App

Zusammenfassung