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
Construye 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>
Incorpore 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>
Incorpore 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>
Implementar los resets básicos de CSS
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;
}
Dar estilo a 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;
}
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%;
}
}
Dar estilo al 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;
}
Inicializando 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
}
});
Ejecutando la aplicación
- Abra
index.htmlen 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:
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.
