Crea una impresionante aplicación web con carrusel Swiper

Introducción

En este proyecto, aprenderás a crear una aplicación web de carrusel Swiper que tenga un diseño de carrusel visualmente atractivo con contenido temático cósmico. La aplicación permitirá a los usuarios navegar a través de diferentes diapositivas y ver tarjetas con datos interesantes sobre el universo.

A continuación, se presenta una vista previa del carrusel Swiper:

🎯 Tareas

En este proyecto, aprenderás:

Cómo construir el esqueleto HTML de la aplicación web
Cómo incrustar el carrusel Swiper en la estructura HTML
Cómo agregar círculos y círculos flotantes animados al fondo de la aplicación
Cómo implementar los resets CSS fundamentales para garantizar un estilo consistente en todos los navegadores
Cómo dar estilo a la sección principal y el contenedor de contenido de la aplicación
Cómo diseñar y animar círculos flotantes en el fondo
Cómo dar estilo al carrusel Swiper y sus componentes
Cómo inicializar el carrusel Swiper usando JavaScript

🏆 Logros

Después de completar este proyecto, podrás:

Crear una aplicación web de carrusel Swiper visualmente atractiva con contenido temático cósmico
Implementar la estructura y el diseño HTML de la aplicación web
Aplicar estilos y animaciones CSS para mejorar la interfaz de usuario
Utilizar JavaScript para inicializar y configurar el carrusel Swiper

Construir el esqueleto HTML

Requisito:

Incrustar las etiquetas meta esenciales para definir el conjunto de caracteres y la configuración de la vista.
Vincular hojas de estilos y scripts externos.

Funcionalidad:

Generar un diseño HTML básico para construir sobre él.

Pasos:

<!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>
    <!-- parcial -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
    <!-- Insertaremos la estructura de nuestro carrusel Swiper a continuación -->
    <!-- Scripts: biblioteca Swiper y nuestra lógica personalizada -->
    <script src="./script.js"></script>
  </body>
</html>

✨ Revisar Solución y Practicar

Incrustar el carrusel Swiper en el HTML

Requisito:

Un lugar estructural dentro del HTML para albergar el contenido de nuestro carrusel.
Elementos de paginación para la navegación.

Funcionalidad:

Incrustar un diseño de carrusel que se puede dar estilo y hacer interactivo.

Pasos:

Agrega esto dentro de la etiqueta <body> en 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>El baile cósmico</h1>
              <p>
                El universo no es solo una vasta extensión de oscuridad; es un
                escenario dinámico del baile cósmico. Las galaxias bailan, las
                estrellas nacen y mueren, y los agujeros negros vagabundean,
                todo gobernado por el ritmo inalterable de las fuerzas
                gravitacionales.
              </p>
              <button class="read-more">Leer más</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>Los secretos oscuros</h1>
              <p>
                Por todo su esplendor de estrellas y galaxias, el universo
                esconde más de lo que revela. La materia oscura y la energía
                oscura, invisibles y misteriosas, componen el 95% del universo,
                manteniendo unidos el cosmos y impulsando su expansión.
              </p>
              <button class="read-more">Leer más</button>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="card">
              <h1>La relatividad del tiempo</h1>
              <p>
                En el vasto cosmos, el tiempo es relativo. Cerca de objetos
                masivos como los agujeros negros, el tiempo parece
                desacelerarse. Lo que parece minutos allí podría equivaler a
                años en otro lugar, convirtiendo el universo en un teatro de la
                elasticidad del tiempo.
              </p>
              <button class="read-more">Leer más</button>
            </div>
          </div>
        </div>
        <!-- Agregar paginación -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

✨ Revisar Solución y Practicar

Incrustar los círculos en el HTML

Requisito:

Para obtener muchas burbujas redondas, agrega <ul> y <li>.

Funcionalidad:

Varias burbujas de diferentes tamaños se animan en el fondo de la página.

Pasos:

<section>
  <!--contenido de 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>

✨ Revisar Solución y Practicar

Implementar los resets CSS fundamentales

Requisito:

Conseguir una apariencia consistente en diferentes navegadores.
Restablecer los márgenes, rellenos y dimensiones de caja predeterminados del navegador.

Funcionalidad:

Anular cualquier estilo predeterminado del navegador para garantizar que nuestro estilo sea consistente en varios navegadores.

Pasos:

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

✨ Revisar Solución y Practicar

Estilizar la sección principal y el contenedor de contenido

Requisito:

Una sección principal que ocupe todo el viewport.
Un contenedor de contenido atractivo visualmente con dimensiones y estilo específicos.

Funcionalidad:

Estilizar la sección principal y el contenedor de contenido para que queden centrado y tengan un aspecto con tema cósmico.

Pasos:

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

✨ Revisar Solución y Practicar

Diseñando círculos flotantes animados

Requisito:

Un fondo dinámico para la sección principal.
Círculos flotantes que se mueven y cambian de apariencia con el tiempo.

Funcionalidad:

Enriquecer el fondo con círculos animados de degradado que se levitan, giran y cambian de opacidad para aumentar la participación del usuario.

Pasos:

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

✨ Revisar Solución y Practicar

Estilizar el carrusel Swiper

Requisito:

Una estructura de carrusel amigable para el usuario.
Diapositivas y tarjetas de contenido elegantes y fáciles de navegar.

Funcionalidad:

Embellir el carrusel Swiper y sus componentes para garantizar que sean responsivos, intuitivos y estéticamente atractivos.

Pasos:

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

.swiper {
  width: 100%;
  /* Ajustado para ocupar el ancho total de su contenedor */
  height: 600px;
  /* Ajustado de altura */
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 90%;
  /* Ajustado para ocupar la mayor parte del ancho de su contenedor */
  height: 80%;
  /* Ajustado para ocupar la mayor parte de la altura de su contenedor */
}

.card {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 100%;
  /* Ajustado para ocupar el ancho completo */
  height: 100%;
  /* Ajustado para ocupar la altura completa */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Centrar el contenido de la tarjeta verticalmente */
}

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

✨ Revisar Solución y Practicar

Inicializar el carrusel Swiper

Requisito:

Un carrusel que responda a la entrada del usuario.
Transiciones suaves entre las diapositivas.
Paginación funcional para la navegación.

Funcionalidad:

Utilizar JavaScript para dar vida al carrusel Swiper, permitiendo transiciones dinámicas y navegación entre las tarjetas de contenido.

Pasos:

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

✨ Revisar Solución y Practicar

Ejecutando la aplicación

Abra index.html en un navegador web.
Pruebe la aplicación agregando gastos y verificando que la lista y el resumen de gastos se actualicen correctamente.
El efecto de la página es el siguiente:

✨ Revisar Solución y Practicar

Resumen

¡Felicidades! Ahora has creado un impresionante carrusel Swiper desde cero. Este proyecto te ha guiado a través de los pasos para configurar los archivos esenciales, esculpir una estructura HTML, tejer estilos CSS detallados, agregar magia con JavaScript y finalmente lanzar el proyecto. Siéntase libre de ampliar esta base incorporando más diapositivas, adaptando el diseño o agregando más funciones de Swiper. Sigue brillando y que la codificación sea feliz.