Cómo hacer un slider responsive solo con HTML y CSS en 2 minutos

jac ADesarrollo Web, HTML, CSS1 years ago3K Views

Los sliders son una excelente manera de mostrar contenido destacado, como imágenes o testimonios, en tu sitio web. Aunque hay muchos plugins y frameworks que pueden ayudarte a crear sliders complejos, a veces solo necesitas algo simple y ligero. En este artículo, te mostraré cómo crear uno de forma muy sencilla, solo con HTML y CSS.

Índice

Cómo Hacer un Slider solo con HTML y CSS en 2 pasos
Paso 1: Estructura HTML
Paso 2: Estilo CSS
Explicación del Código
- HTML:
- CSS
Comentarios finales

Cómo Hacer un Slider solo con HTML y CSS en 2 pasos

Cómo hacer un slider solo con HTML y CSS en 2 minutos

Paso 1: Estructura HTML

Primero, vamos a crear la estructura HTML básica. Utilizaremos un contenedor principal para el slider y dentro de él, colocaremos nuestras imágenes y los controles para la navegación.

Luego debes poner las rutas en donde se encuentran alojadas todas tus imágenes dentro de cada una de las etiquetas <li>. En este ejemplo solo utilizo 4, puedes agregar más o reducir la cantidad de imágenes si así lo necesitas pero no olvides actualizar la cantidad de controles también.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider con HTML y CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slides">
            <input type="radio" name="radio-btn" id="radio1" checked>
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
            <input type="radio" name="radio-btn" id="radio4">
            <div class="slide first">
                <img src="nombre-de-imagen-aqui.jpg" alt="Imagen 1">
            </div>
            <div class="slide">
                <img src="nombre-de-imagen-aqui.jpg" alt="Imagen 2">
            </div>
            <div class="slide">
                <img src="nombre-de-imagen-aqui.jpg" alt="Imagen 3">
            </div>
            <div class="slide">
                <img src="nombre-de-imagen-aqui.jpg" alt="Imagen 4">
            </div>
        </div>
        <div class="navigation-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
        </div>
    </div>
</body>
</html>

Paso 2: Estilo CSS

Ahora, vamos a darle estilo a nuestro slider con CSS. Asegúrate de tener un archivo styles.css y agrega el siguiente código CSS:

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #333;
}
.slider {
    width: 90%;
    height: 70vh;
    overflow: hidden;
}
.slides {
    width: 700%;
    height: 100%;
    display: flex;
}
.slides input {
    display: none;
}
.slide {
    width: 20%;
    transition: 2s;
}
.slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.navigation-manual {
    position: absolute;
    width: 90%;
    margin-top: -40px;
    display: flex;
    justify-content: center;
}
.manual-btn {
    border: 2px solid #fff;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}
.manual-btn:not(:last-child) {
    margin-right: 40px;
}
.manual-btn:hover {
    background: #fff;
}
#radio1:checked ~ .first {
    margin-left: 0;
}
#radio2:checked ~ .first {
    margin-left: -20%;
}
#radio3:checked ~ .first {
    margin-left: -40%;
}
#radio4:checked ~ .first {
    margin-left: -60%;
}
/* Responsive */
@media only screen and (max-width: 748px) {
        .slider {
            width: 90%;
            height: 50vh;
            overflow: hidden;
        }
}
@media only screen and (max-width: 540px) {
        .slider {
            width: 90%;
            height: 30vh;
            overflow: hidden;
        }
}

Explicación del Código

HTML:

Contenedor principal:

div con clase slider.
Actúa como el contenedor principal del slider.

Contenedor de las slides:

div con clase slides.
Contiene todas las slides y los inputs de radio que controlan la visibilidad de cada slide.

Inputs de radio:

Cada input es de tipo radio.
name="radio-btn" asegura que solo un radio puede estar seleccionado a la vez.
id="radio1", id="radio2", etc., son identificadores únicos para cada radio.
checked en el primer input asegura que la primera slide esté visible por defecto.

Slides individuales:

Cada div tiene la clase slide y contiene una imagen.
La primera slide tiene la clase adicional first.
Las imágenes tienen un atributo src que apunta a la ubicación de la imagen y un alt que proporciona texto alternativo.

Navegación manual (dots):

div con clase navigation-manual.
Contiene los controles de navegación (dots).
Cada label está asociado a un input de radio correspondiente mediante el atributo for.
La clase manual-btn se utiliza para aplicar estilos a los dots.

CSS

Reseteo de estilos básicos: El código * { margin: 0; padding: 0; box-sizing: border-box; } asegura que todos los elementos tengan un estilo base consistente.
Estilos del cuerpo: body está configurado para centrar el slider tanto horizontal como verticalmente en la pantalla.
Contenedor del slider: .slider define el tamaño del contenedor principal y oculta cualquier contenido que desborde con overflow: hidden;.
Estilos de las slides: .slides define el ancho total (500% para acomodar 5 slides) y utiliza display: flex; para alinear las imágenes en una fila. Cada .slide tiene un ancho de 20% (1/5 del contenedor total) y una transición suave de 2 segundos.
Imágenes: .slide img asegura que las imágenes se ajusten al tamaño del contenedor de la slide.
Navegación manual: .navigation-manual posiciona los dots en el centro y justo debajo del slider. Los .manual-btn son los dots, estilizados para ser circulares y cambiar de color al pasar el ratón por encima.
Radio buttons y navegación: Las reglas CSS para #radio1:checked ~ .first, #radio2:checked ~ .first, etc., cambian el margen izquierdo de la primera slide para mostrar la slide correspondiente cuando se selecciona un dot.

Comentarios finales

¡Y ahí lo tienes! Un slider funcional hecho únicamente con HTML y CSS, usando dots para la navegación manual. Este tipo de slider es ideal para sitios web que buscan simplicidad y rapidez de carga sin depender de JavaScript.

Espero que este artículo te haya sido útil. ¡Feliz coding!