Créer une magnifique application web avec un carrousel Swiper

Introduction

Dans ce projet, vous allez apprendre à créer une application web Swiper carousel qui présente une disposition de carousel visuellement attrayante avec un contenu thématiques cosmique. L'application permettra aux utilisateurs de naviguer entre différents diapositives et de visualiser des cartes avec des faits intéressants sur l'univers.

Voici une aperçu du carousel Swiper :

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment construire le squelette HTML pour l'application web
Comment intégrer le carousel Swiper dans la structure HTML
Comment ajouter des cercles et des cercles flottants animés au fond de l'application
Comment implémenter des réinitialisations CSS de base pour s'assurer d'un style cohérent sur tous les navigateurs
Comment styliser la section principale et le conteneur de contenu de l'application
Comment concevoir et animer des cercles flottants dans le fond
Comment styliser le carousel Swiper et ses composants
Comment initialiser le carousel Swiper à l'aide de JavaScript

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Créer une application web Swiper carousel visuellement attrayante avec un contenu thématiques cosmique
Implémenter la structure et la disposition HTML pour l'application web
Appliquer des styles et des animations CSS pour améliorer l'interface utilisateur
Utiliser JavaScript pour initialiser et configurer le carousel Swiper

Construire le squelette HTML

Exigence :

Intégrer les balises meta essentielles pour définir l'ensemble de caractères et les paramètres de la vue.
Lier les feuilles de style et les scripts externes.

Fonctionnalité :

Générer une disposition HTML de base pour construire dessus.

Étapes :

<!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>
    <!-- Nous insérerons la structure de notre carousel Swiper ensuite -->
    <!-- Scripts : bibliothèque Swiper et notre logique personnalisée -->
    <script src="./script.js"></script>
  </body>
</html>

✨ Vérifier la solution et pratiquer

Intégrer le carousel Swiper dans le HTML

Exigence :

Un emplacement structurel dans le HTML pour accueillir le contenu de notre carousel.
Des éléments de pagination pour la navigation.

Fonctionnalité :

Intégrer une disposition de carousel qui peut être stylisée et rendue interactive.

Étapes :

Ajoutez ceci dans la balise <body> de index.html :

<section>
  <div class="content">
    <div class="swiper">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="card">
              <h1>Ballet cosmique</h1>
              <p>
                L'univers n'est pas seulement une vaste étendue d'obscurité ;
                c'est une scène dynamique de ballet cosmique. Les galaxies
                dansent, les étoiles naissent et meurent, et les trous noirs
                errent, tout gouverné par le rythme immuable des forces
                gravitationnelles.
              </p>
              <button class="read-more">En savoir plus</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Secrets secrets</h1>
              <p>
                Pour tout son étoiles et galaxies lumineuses, l'univers cache
                plus qu'il ne révèle. La matière noire et l'énergie noire,
                invisibles et mystérieuses, constituent 95 % de l'univers,
                tenant le cosmos ensemble et entraînant son expansion.
              </p>
              <button class="read-more">En savoir plus</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Relativité du temps</h1>
              <p>
                Dans le vaste cosmos, le temps est relatif. Près d'objets
                massifs comme les trous noirs, le temps semble ralentir. Ce qui
                semble être quelques minutes là-bas pourrait équivaloir à des
                années ailleurs, rendant l'univers un théâtre de l'élasticité du
                temps.
              </p>
              <button class="read-more">En savoir plus</button>
            </div>
          </div>
        </div>
        <!-- Ajoutez la pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

✨ Vérifier la solution et pratiquer

Intégrer les cercles dans le HTML

Exigence :

Pour obtenir de nombreux bulles rondes, ajoutez <ul> et <li>.

Fonctionnalité :

De nombreuses bulles de différentes tailles sont animées dans l'arrière-plan de la page.

Étapes :

<section>
  <!--contenu swiper...-->
  <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>

✨ Vérifier la solution et pratiquer

Mise en œuvre de réinitialisations CSS de base

Exigence :

Obtenir un aspect cohérent sur différents navigateurs.
Réinitialiser les marges, les paddings et les dimensions de boîte par défaut du navigateur.

Fonctionnalité :

Annuler tous les styles par défaut du navigateur pour s'assurer que notre style reste cohérent sur divers navigateurs.

Étapes :

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

✨ Vérifier la solution et pratiquer

Styliser la section principale et le conteneur de contenu

Exigence :

Une section principale qui occupe l'ensemble de la zone de vision.
Un conteneur de contenu visuellement attrayant avec des dimensions et un style spécifiques.

Fonctionnalité :

Styliser la section principale et le conteneur de contenu pour les centrer horizontalement et leur donner un aspect thématiques cosmique.

Étapes :

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

✨ Vérifier la solution et pratiquer

Conception de cercles flottants animés

Exigence :

Un arrière-plan dynamique pour la section principale.
Des cercles flottants qui bougent et changent d'apparence au fil du temps.

Fonctionnalité :

Enrichir l'arrière-plan avec des cercles animés et à gradient qui flottent, tournent et changent d'opacité pour améliorer l'engagement de l'utilisateur.

Étapes :

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

✨ Vérifier la solution et pratiquer

Styliser le carrousel Swiper

Exigence :

Une structure de carrousel conviviale pour l'utilisateur.
Des diapositives et des cartes de contenu élégantes et faciles à naviguer.

Fonctionnalité :

Orner le carrousel Swiper et ses composants pour s'assurer qu'ils sont réactifs, intuitifs et esthétiquement agréables.

Étapes :

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

.swiper {
  width: 100%;
  /* Ajusté pour occuper toute la largeur de son conteneur */
  height: 600px;
  /* Ajusté pour la hauteur */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Ajusté pour occuper la plupart de la largeur de son conteneur */
  height: 80%;
  /* Ajusté pour occuper la plupart de la hauteur de son conteneur */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Ajusté pour occuper toute la largeur */
  height: 100%;
  /* Ajusté pour occuper toute la hauteur */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrer le contenu de la carte verticalement */
}

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

✨ Vérifier la solution et pratiquer

Initialiser le carrousel Swiper

Exigence :

Un carrousel qui réagit à l'entrée de l'utilisateur.
Des transitions fluides entre les diapositives.
Une pagination fonctionnelle pour la navigation.

Fonctionnalité :

Utiliser JavaScript pour donner vie au carrousel Swiper, permettant des transitions dynamiques et une navigation entre les cartes de contenu.

Étapes :

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

✨ Vérifier la solution et pratiquer

Exécuter l'application

Ouvrez index.html dans un navigateur web.
Testez l'application en ajoutant des dépenses et en vérifiant que la liste et le résumé des dépenses sont mis à jour correctement.
L'effet de la page est le suivant :

✨ Vérifier la solution et pratiquer

Sommaire

Félicitations ! Vous avez désormais créé un magnifique carrousel Swiper de zéro. Ce projet vous a guidé dans les étapes de la configuration des fichiers essentiels, de la création d'une structure HTML, de l'ajout de styles CSS détaillés, de la mise en œuvre de la magie JavaScript et, enfin, du lancement du projet. N'hésitez pas à développer cette base en incorporant plus de diapositives, en adaptant le design ou en ajoutant d'autres fonctionnalités Swiper. Continuez à briller et bonne programmation !