Crea un Carrusel para tu sitio web con HTML, CSS y JavaScript | Swiper.js

¡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!

En este canal, muestro mi trabajo, tutoriales, tips y comparto lo que voy aprendiendo.

Ultimos videos