INTRODUCCIÓN
En este tutorial, aprenderás cómo crear un carrusel de imágenes básico utilizando solo HTML y CSS. Los carruseles de imágenes son una excelente manera de mostrar múltiples imágenes de manera dinámica en tu sitio web.
ESTRUCTURA HTML
main: El elemento HTML `<main>` representa el contenido principal del `<body>`, siendo lo primero que se visualiza en una página web.
Div: El elemento `<div>` se utiliza como un contenedor para agrupar contenido. Es un elemento en bloque, lo que significa que si hay varios `<div>`, cada uno se posicionará uno debajo del otro.
img: El elemento de imagen HTML `<img>` representa una imagen en el documento.
ATRIBUTOS:
src: Contiene una ruta que apunta a la imagen que quieres mostrar en la página, ya sea un enlace o una ruta local.
alt: El atributo `alt`, también conocido como texto alternativo, especifica el texto que se mostrará si la imagen no se carga correctamente. Es importante para la accesibilidad y la experiencia del usuario, ya que describe el contenido de la imagen en caso de que no se pueda ver.
CSS
Utilizaremos CSS para dar estilo al carrusel y hacer que funcione.
-Le damos un ancho a las imágenes
img {
width: 300px;
}La propiedad CSS width determina el ancho de un elemento en una página web. Esta propiedad te permite establecer el ancho de un elemento utilizando diferentes valores y unidades de medida, lo que te brinda flexibilidad para adaptar el tamaño del elemento según tus necesidades específicas.
-Hacemos flexible el contenedor(div)
div {
display: flex;
}Con la propiedad display y el valor flex, estamos proporcionando flexibilidad a los elementos hijos del contenedor <div>. Esto significa que las imágenes ya no se comportarán como elementos en línea, en lugar de eso, las imágenes se colocarán en una única fila, lo que facilita controlar cómo se organizan y alinean en la página.
NOTA: Como podemos observar en la imagen, una vez aplicado display: flex al contenedor <div>, los elementos no solamente se colocan de manera flexible (en una sola línea), sino que también se ha agregado una barra de desplazamiento en la parte inferior. Esto indica que ya tenemos el carrusel de imágenes básico funcionando. Sin embargo, no podemos dejarlo así; continuemos agregándole más estilos. Por favor, sigue leyendo...
-Ubicación de la barra de desplazamiento horizontal (scroll)
div {
overflow-x: scroll;
}La propiedad overflow-x con el valor scroll agrega una barra horizontal en el eje x. En el plano cartesiano, el eje x es horizontal, por lo tanto, la barra de desplazamiento se agrega en esa dirección.
-Ajustando el ancho del carrusel con la propiedad width
div {
width: 60%;
}Al usar la propiedad width con el valor 60%, estamos indicando que el <div> ocupará el 60% del ancho de su contenedor padre. En este caso, el contenedor padre es el elemento <main>, ya que el <div> está dentro de él. Por lo tanto, el <main> actúa como el padre del <div>. Esto significa que el ancho del <div> será el 60% del ancho del <main>.
-Personalización de la barra de desplazamiento
div::-webkit-scrollbar {
height: 12px;
}
div::-webkit-scrollbar-thumb {
background-color: #cf0000;
border-radius: 5px;
}El pseudo-elemento CSS ::-webkit-scrollbar afecta el estilo de la barra de desplazamiento asociada a un elemento. En este caso, estamos ajustando el alto de la barra con la propiedad height, y utilizamos ::-webkit-scrollbar-thumb para estilizar el control deslizante (la parte móvil de la barra). Al control deslizante le agregamos un color en formato hexadecimal (cf0000) y le aplicamos bordes de 5px en las esquinas.
