Un slider bien hecho cuenta una historia en segundos

04 · Estrategia

Sliders en la página de inicio

El slider de la portada es la vitrina del sitio. Los ejemplos modernos tienen algo en común: fotografía de alta calidad, textos pensados, botones bien ubicados y tiempos que dan chance de leer.

Qué aprender de los ejemplos

• Apps y servicios: diseño ordenado, mucho espacio en blanco y animaciones suaves para explicar funciones paso a paso.
• Turismo y hoteles: la imagen manda; el texto es breve y discreto.
• Salud y bienestar: colores suaves y composición tranquila para transmitir confianza.
• Productos: una pieza protagonista por slide, con navegación por arrastre o puntos.
• Equipos de trabajo: interacción (pasar el mouse, hacer clic en un nombre) para presentar a cada persona.

06 · Manos a la obra

Cómo hacer un slider de imágenes en HTML y CSS

El video de divcode enseña a construir un slider usando solo HTML y CSS, sin plugins ni JavaScript. Míralo primero y después sigue los pasos escritos.

1. Prepara las carpetas e imágenes

   Crea una carpeta del proyecto con index.html, styles.css y una carpeta img. Usa imágenes del mismo tamaño y proporción (por ejemplo 1600 × 900 px). Si tienen tamaños distintos, el slider "salta".

2. Escribe la estructura HTML

   Un contenedor que sirve de ventana y, adentro, una lista con una imagen por elemento.

   Copiar

   <div class="slider-css">
     <ul>
       <li><img src="img/cafetal.jpg" alt="Montañas cafeteras"></li>
       <li><img src="img/ciudad.jpg" alt="Ciudad al atardecer"></li>
       <li><img src="img/playa.jpg" alt="Playa tropical"></li>
     </ul>
   </div>

3. Convierte el contenedor en una ventana

   overflow: hidden esconde todo lo que se sale del contenedor. Así solo se ve una imagen a la vez.

   Copiar

   .slider-css {
     width: 100%;
     max-width: 900px;
     margin: auto;
     overflow: hidden;
     border-radius: 12px;
   }

4. Pon las imágenes en fila

   La lista mide 300% porque hay 3 imágenes. Cada elemento mide un tercio de la lista, que es exactamente el ancho de la ventana.

   Copiar

   .slider-css ul {
     display: flex;
     width: 300%;          /* 3 imágenes x 100% */
     margin: 0;
     padding: 0;
     animation: deslizar 15s infinite alternate ease-in-out;
   }
   .slider-css li {
     list-style: none;
     width: calc(100% / 3); /* una imagen = un tercio de la fila */
   }
   .slider-css img {
     width: 100%;
     display: block;
     aspect-ratio: 16 / 9;
     object-fit: cover;
   }

5. Anima el movimiento con @keyframes

   La fila se desplaza a la izquierda un tercio cada vez. Los porcentajes repetidos (0% y 28%, por ejemplo) son las pausas: la imagen se queda quieta un rato antes de moverse.

   Copiar

   @keyframes deslizar {
     0%, 28%    { transform: translateX(0); }
     36%, 64%   { transform: translateX(-33.333%); }
     72%, 100%  { transform: translateX(-66.666%); }
   }
   
   /* Accesibilidad: respeta a quien desactivó las animaciones */
   @media (prefers-reduced-motion: reduce) {
     .slider-css ul { animation: none; }
   }

6. Mira el resultado

   Este es el código de arriba funcionando:

   • 
   • 
   • 

7. Reto: agrega controles con JavaScript

   El slider de solo CSS no se puede pausar ni controlar. Para tener flechas, puntos y pausa (como la cabecera de esta página) se necesita un poco de JavaScript. La idea central es mover la pista según un índice:

   Copiar

   const pista = document.querySelector('.slides');
   const total = pista.children.length;
   let actual = 0;
   
   function irA(n) {
     actual = (n + total) % total;   // da la vuelta al llegar al final
     pista.style.transform = `translateX(-${actual * 100}%)`;
   }
   
   document.querySelector('.next').onclick = () => irA(actual + 1);
   document.querySelector('.prev').onclick = () => irA(actual - 1);
   setInterval(() => irA(actual + 1), 5000);

   El código completo de la demo 1 está en js/main.js de este proyecto, comentado línea a línea.