Construyendo un slider de imágenes con HTML y CSS sin JavaScript

Construyendo un slider de imágenes con HTML y CSS sin javascript.

¿Alguna vez has querido crear un slider de imágenes para mostrar tus fotos o productos, pero no tienes conocimientos de javascript? No te preocupes, en este tutorial te mostraré cómo puedes construir un slider de imágenes utilizando solo HTML y CSS, sin necesidad de utilizar javascript.

Paso 1: Estructura básica del slider

Para empezar, necesitaremos crear la estructura básica del slider en HTML. Utilizaremos una lista no ordenada (<ul>) para contener cada una de las imágenes, y cada imagen se representará con un elemento de lista (<li>).

<div class="slider">
<ul>
<li><img src="imagen1.jpg" alt="Imagen 1&#8243;></li>
<li><img src="imagen2.jpg" alt="Imagen 2&#8243;></li>
<li><img src="imagen3.jpg" alt="Imagen 3&#8243;></li>
</ul>
</div>

Asegúrate de reemplazar «imagen1.jpg», «imagen2.jpg» y «imagen3.jpg» con las rutas de tus propias imágenes.

Paso 2: Estilos CSS

A continuación, necesitaremos aplicar estilos CSS al slider para hacerlo funcional y visualmente atractivo. Aquí tienes un ejemplo de estilos básicos para comenzar:

.slider {
width: 100%;
overflow: hidden;
}
.slider ul {
width: 300%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slider li {
flex: 1 0 100%;
}
.slider img {
width: 100%;
height: auto;
}

Estos estilos hacen que el slider ocupe todo el ancho disponible, ocultando cualquier parte del contenido que se desborde. Las imágenes se muestran en un arreglo en línea utilizando flexbox, con cada imagen ocupando un tercio del ancho total. El evento de transición permite animar el deslizamiento suavemente.

Paso 3: Añadir controles de navegación

Para permitir que los usuarios naveguen por las imágenes del slider, añadiremos controles de navegación. En este ejemplo, utilizaremos dos botones: uno para avanzar y otro para retroceder.

<div class="slider">
<ul>
<li><img src="imagen1.jpg" alt="Imagen 1&#8243;></li>
<li><img src="imagen2.jpg" alt="Imagen 2&#8243;></li>
<li><img src="imagen3.jpg" alt="Imagen 3&#8243;></li>
</ul>
<button class="prev-button">Anterior</button>
<button class="next-button">Siguiente</button>
</div>

Ahora, necesitaremos agregar estilos y funcionalidad para los botones de navegación:

.prev-button,
.next-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background-color: #ccc;
border: none;
color: #fff;
}
.prev-button {
left: 10px;
}
.next-button {
right: 10px;
}

Estos estilos posicionan los botones en los lados izquierdo y derecho del slider, y los colocan en el centro verticalmente. Los botones tienen un estilo básico con color de fondo gris y texto blanco.

Paso 4: Añadir funcionalidad a los botones

Para que los botones de navegación funcionen, necesitaremos utilizar el selector de hermanos adyacentes de CSS para cambiar la posición del slider.

.prev-button:hover,
.next-button:hover {
background-color: #aaa;
cursor: pointer;
}
.prev-button:focus,
.next-button:focus {
outline: none;
}
.prev-button:active,
.next-button:active {
background-color: #555;
}
.prev-button:focus + ul {
transform: translateX(-100%);
}
.next-button:focus + ul {
transform: translateX(-200%);
}

Estos estilos aplican cambios visuales cuando los botones son hover, enfocados o activados. Además, utilizamos el selector de hermanos adyacentes de CSS (+) para cambiar la posición del slider cuando uno de los botones recibe el enfoque.

¡Y eso es todo! Ahora tienes un slider de imágenes funcional construido con HTML y CSS sin necesidad de utilizar javascript.

Si deseas personalizar aún más el diseño o agregar animaciones adicionales, puedes jugar con los estilos CSS y experimentar. Recuerda que este es solo un ejemplo básico para ayudarte a comenzar.

Espero que este tutorial te haya sido útil. Si deseas ver un ejemplo en vivo, puedes visitar este enlace. ¡Diviértete construyendo tu propio slider de imágenes!