como HACER un CARRUSEL de IMAGENES en HTML CSS y JAVASCRIPT 😱

Cómo crear un Carrusel de imágenes en HTML, CSS y JavaScript

Introducción al tutorial

• El tutorial se centra en la creación de un carrusel de imágenes utilizando HTML, CSS y JavaScript.

• Se menciona que el slider es completamente responsivo, adaptándose a diferentes tamaños de pantalla.

Preparación del entorno

• Se sugiere usar Visual Studio Code como editor, aunque se puede utilizar cualquier otro editor preferido.

• Se crea una carpeta llamada "slider" para organizar los archivos del proyecto.

• Se establece la estructura básica de un archivo HTML5 y se vincula el archivo CSS correspondiente.

Configuración inicial

• El archivo HTML se abre en el navegador predeterminado del usuario para visualizar los cambios realizados.

• Para facilitar el desarrollo, se recomienda instalar la extensión "Live Server" en Visual Studio Code para evitar recargar manualmente la página cada vez que se guardan cambios.

Uso de librerías externas

• Se introduce la librería Swiper (versión 9), que simplifica el desarrollo del carrusel.

• Además, se menciona la necesidad de crear un archivo JavaScript llamado script.js donde se integrarán las funcionalidades necesarias.

Integración de imágenes y archivos

• Las imágenes necesarias para el carrusel serán proporcionadas en la descripción del video; también habrá archivos iniciales disponibles para descargar.

Creación de una Lista Desordenada y Navegación

Introducción a la lista desordenada

• Se inicia la creación de una lista desordenada utilizando <ul>, comenzando con un logo y una fecha simulada (enero 2020).

• Se menciona que se puede modificar el contenido según las necesidades, sugiriendo el uso de JavaScript para actualizar dinámicamente la fecha.

Estructura de navegación

• Se añaden enlaces a la lista, incluyendo "inicio" y "servicios", destacando que esto simula una navegación.

• Se introduce un nuevo <div> con clase swiper para implementar un carrusel, mencionando el uso de la librería Swiper.

Implementación del Carrusel

Configuración del carrusel

• Dentro del contenedor swiper, se crea otro <div> con clase swiper-slide para definir los elementos individuales del carrusel.

• Se agrega un encabezado (<h3>) y un párrafo descriptivo dentro de cada slide, proporcionando contenido visual.

Adición de imágenes al carrusel

• Se comienza a insertar imágenes en los slides, repitiendo este proceso siete veces para completar el carrusel.

• Cada imagen se copia y pega en su respectivo slide, asegurándose de cambiar el nombre adecuadamente (imagen 1 a imagen 7).

Resumen Final del HTML

Estructura general

• Un resumen es presentado sobre la estructura HTML creada hasta ahora, enfatizando cómo cada parte está organizada dentro del contenedor swiper.

• Se concluye con la creación de otro <div> que contiene imágenes adicionales como fondo.

Estilos CSS Iniciales

Configuración básica del CSS

• Comienza la configuración del archivo CSS donde se aplican resets: márgenes y padding en cero para eliminar estilos por defecto.

• También se eliminan decoraciones en texto (líneas debajo de enlaces), así como estilos de listas (bolitas).

Establecimiento del fondo

Introducción a la Configuración de Estilos en CSS

Uso de Fuentes y Contenedores

• Se sugiere pausar el video para seguir los pasos. Se utilizará una fuente de Frankie Golden en Medium y se establecerá un contenedor con un ancho máximo de 1040 píxeles.

• El margen del contenedor se configurará a cero, con auto en los lados izquierdo y derecho.

Extensiones Recomendadas para Visual Studio Code

• Se menciona una extensión llamada "CSS Navigation" que facilita la búsqueda de clases dentro del HTML, evitando tener que buscarlas manualmente.

• La instalación de esta extensión es opcional, pero se recomienda para agilizar el desarrollo.

Estilización Inicial del Diseño

• Se establece un padding de 20 píxeles arriba y abajo, y cero a los lados. También se implementa display: flex para organizar elementos.

• El diseño inicial está orientado hacia escritorio primero (desktop-first), adaptándose posteriormente a dispositivos móviles.

Detalles sobre Listas y Navegación

Configuración de Listas

• Para las listas (ul), también se aplicará display: flex, permitiendo una mejor organización visual.

• Los elementos li tendrán un padding específico y transformaciones textuales para asegurar que inicien con mayúsculas.

Estilo de Enlaces

• Los enlaces dentro de las listas recibirán estilos similares, incluyendo tamaño de letra y color específicos.

Implementación del Componente Swiper

Ajustes Iniciales del Swiper

• Se ajusta la imagen superior del swiper a 40 píxeles desde la parte superior. También se establece un margen inferior.

• El color de fondo será blanco, lo cual ayuda a visualizar mejor el contenido durante el desarrollo inicial.

Sombra y Bordes

• Se aplican sombras a las imágenes con valores específicos para crear profundidad visual. Además, se configuran bordes redondeados (border-radius).

Finalización del Diseño Visual

Posicionamiento Absoluto

• Elementos como imágenes dentro del swiper tendrán posiciones relativas o absolutas según sea necesario para su correcta visualización.

Ajuste Final al Contenido

Modificación de Estilos y Responsividad en CSS

Ajustes Iniciales de la Imagen

• Se centra la imagen y se establece un índice Z para que aparezca delante de otros elementos. Se define un ancho de 800 píxeles para la imagen.

Visualización en Escritorio

• Al visualizar en modo escritorio, se confirma que la imagen está correctamente posicionada. Se comienza a trabajar en la parte responsiva del diseño.

Implementación de Media Queries

• Se introduce una media query para aplicar estilos responsivos cuando la resolución es menor a 991 píxeles. Esto asegura que el diseño se adapte adecuadamente a dispositivos móviles.

Espaciado y Navegación

• Se ajusta el espaciado de navegación a 30 píxeles en todas las direcciones, ocultando el lado izquierdo mediante display: none. También se añade padding al swiper.

Adaptación del Ancho de Imágenes

• Las imágenes dentro del slider se configuran con un ancho del 100% para evitar espacios vacíos. Se aplica padding de 30 píxeles alrededor para mantener el diseño limpio.

Finalización del CSS y Comienzo del JavaScript

Revisión Final del CSS

• El CSS está completo, permitiendo que las imágenes se adapten tanto en escritorio como en móvil. Los usuarios son animados a revisar su trabajo comparándolo con el video.

Introducción al JavaScript

• Se abre el archivo JavaScript para comenzar a codificar. La tarea es sencilla e involucra instanciar una variable llamada swiper.

Configuración del Swiper

• La variable swiper hace referencia al elemento principal y se configura con propiedades como slidesPerView, separación entre slides, y cursor personalizado.

Funcionalidad Adicional

• Se implementa un cursor tipo "manita" para mejorar la interacción visual. Además, se activa un bucle infinito para los slides.

Breakpoints y Adaptabilidad

• Se añaden breakpoints específicos (991 píxeles), asegurando que el carrusel funcione correctamente tanto en vista móvil como escritorio.

Conclusión sobre Personalización