¡Hola a todos! En este video les muestro cómo creé un hero section (o sección principal) increíble y responsive para un sitio web usando solo HTML, CSS y JavaScript. En esta practica utilicé la popular librería Swiper.js para darle vida a este slider de forma sencilla y eficiente.
En este tutorial, aprenderás a:
- Estructurar el carrusel con HTML y CSS desde cero.
- Implementar la librería Swiper.js para un slider interactivo.
- Usar JavaScript para añadir funcionalidad al carrusel de imágenes.
Además, para que puedas practicar, he dejado los archivos base en mi repositorio de GitHub o puedes descargarlo directamente en el botón de recursos del video que esta arriba ☝🏻.
📍 Archivos del proyecto en GitHub: https://github.com/DaniCodex/carrusel-img-auto-manual
📍 Recursos Swiper.js: https://swiperjs.com/get-started
📍 Font: https://fonts.google.com/specimen/Pop…
¡Espero que este video te sea de gran ayuda y puedan crear su propio hero section!