DESARROLLO FRONTEND

Cómo crear un Carrusel Infinito y Responsive solo con HTML y CSS

Aprende a maquetar un slider de imágenes automático con animaciones fluidas, variables CSS y diseño adaptativo

Usarás animaciones fluidas, variables CSS y diseño adaptativo para lograr un resultado profesional sin JavaScript.

1

Estructura HTML: El Escenario y la Pista

Construimos la base. Tenemos un contenedor principal (.carousel) que actúa como 'ventana', y dentro, una 'pista' (.carousel-inner) que contiene todos los slides. Esta pista es la que moveremos horizontalmente para crear el efecto de desplazamiento.

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="..." class="carousel-image" alt="playa" />
      <div class="carousel-caption">
        <h2 class="carousel-title">Playa rocosa</h2>
        <p class="carousel-text">Descubrí una costa única...</p>
        <button class="carousel-button">Ver más</button>
      </div>
    </div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  </div>
</div>
2
Diagrama de arquitectura del carrusel: Contenedor vs Pista vs Items
Esquema de la arquitectura: el contenedor padre (.carousel) actúa como una máscara fija, mientras el hijo (.carousel-inner) es la pista que se desplaza.
<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="..." class="carousel-image" alt="playa" />
      <div class="carousel-caption">
        <h2 class="carousel-title">Playa rocosa</h2>
        <p class="carousel-text">Descubrí una costa única...</p>
        <button class="carousel-button">Ver más</button>
      </div>
    </div>
    <div class="carousel-item">...</div>
    <div class="carousel-item">...</div>
  </div>
</div>
3

CSS: Variables y el Contenedor Principal

Definimos variables CSS para controlar fácilmente la cantidad de slides y la altura. El contenedor principal usa overflow: hidden para ocultar todo lo que esté fuera de la 'ventana' visible, creando el efecto de máscara.

/* Reset básico (mejor que el selector universal)
- Evita que el navegador agregue márgenes/padding por defecto.
- Lo aplicamos solo a html y body para no “romper” estilos internos de otros elementos (como inputs, botones, etc.).*/

 html, body {
   margin: 0;
   padding: 0;
}

 .carousel {
   /* Variables para fácil configuración */
  --slides: 3;       /* Cantidad total de slides */
  --h: 35dvw;        /* Altura proporcional al ancho del viewport */

  width: 100%;
  height: var(--h);
  overflow: hidden;  /* La magia: oculta los slides que no están en foco */
}
4

La Pista Animada (Flexbox y Cálculos)

El .carousel-inner es donde ocurre la acción. Usamos display: flex para poner los slides en fila y calc() para definir el ancho total basado en la cantidad de slides (3 slides = 300% de ancho) . Aquí vinculamos la animación slide.

.carousel-inner {
  display: flex;   /* Alinea los slides horizontalmente */
  height: 100%;
  
  /* Ancho dinámico: Si son 3 slides, ancho = 300% */
  width: calc(var(--slides) * 100%);

  /* La animación que mueve la pista */
  animation: slide 20s infinite ease-in-out;
  will-change: transform;    /* Optimización de rendimiento */
}

.carousel-item {
  position: relative;
  /* Cada slide ocupa exactamente una fracción del ancho total (100% / 3) */
  flex: 0 0 calc(100% / var(--slides));
  height: 100%;
  display: flex;
  place-content: center;
  place-items: center;
}
5
Visualización de cómo object-fit recorta la imagen para llenar el contenedor
Demostración de 'object-fit: cover': la imagen escala para llenar el contenedor y recorta los bordes sobrantes automáticamente para no distorsionarse.
.carousel-image {
  position: absolute;
  inset: 0;           /* Top, Right, Bottom, Left en 0 */
  width: 100%;
  height: 100%;
  
  object-fit: cover;  /* Recorta la imagen para llenar el contenedor */
  z-index: 1;         /* Queda por detrás del texto */
}
6

Estilizando el Contenido (Caption)

El texto va sobre la imagen. Usamos un fondo semitransparente con rgb(0 0 0 / 0.5) para garantizar legibilidad y unidades relativas (dvw) para que el tamaño del texto y los botones escale perfectamente con la pantalla.

.carousel-caption {
  position: relative;
  z-index: 2;                  /* Por encima de la imagen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  width: 40dvw;                /* Ancho relativo al viewport */
  padding: 5dvw;
  gap: 3dvw;
  border-radius: 2dvw;
  
  background: rgb(0 0 0 / 0.5); /* Fondo oscuro semitransparente */
  color: #fff;
  text-align: center;
}

.carousel-title {
  font-size: 1.6dvw;           /* Tipografía responsiva */
  font-weight: 700;
}

.carousel-text {
  /* Texto un poco más chico */
  font-size: 1dvw;
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch

Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertos
Precio $150000 ARG Oferta especial
Ver próximas fechas
8

La Lógica de la Animación (Keyframes)

Aquí está el cerebro del carrusel. Usamos porcentajes negativos de translateX para mover la pista. Lo importante son las pausas: notarás que hay rangos (ej: 0% a 22.5%) donde el valor no cambia, esto permite que el slide se quede quieto para que el usuario pueda leerlo.

@keyframes slide {
  /* Slide 1: Quieto del 0% al 22.5% */
  0%, 22.5%     { transform: translateX(0%); }

  /* Slide 2: Quieto del 25% al 47.5% (-33.33% es 1/3 del ancho) */
  25%, 47.5%    { transform: translateX(-33.333%); }

  /* Slide 3: Quieto del 50% al 72.5% (-66.66% es 2/3 del ancho) */
  50%, 72.5%    { transform: translateX(-66.666%); }

  /* Vuelta al Slide 2 (efecto rebote o ciclo) */
  75%, 97.5%    { transform: translateX(-33.333%); }

  /* Vuelta al inicio */
  100%          { transform: translateX(0%); }
}
9
Gráfico de línea de tiempo de los Keyframes mostrando pausas y movimientos
Representación gráfica de la línea de tiempo: las 'mesetas' indican las pausas de lectura y las pendientes representan el movimiento de transición.
@keyframes slide {
  /* Slide 1: Quieto del 0% al 22.5% */
  0%, 22.5%     { transform: translateX(0%); }

  /* Slide 2: Quieto del 25% al 47.5% (-33.33% es 1/3 del ancho) */
  25%, 47.5%    { transform: translateX(-33.333%); }

  /* Slide 3: Quieto del 50% al 72.5% (-66.66% es 2/3 del ancho) */
  50%, 72.5%    { transform: translateX(-66.666%); }

  /* Vuelta al Slide 2 (efecto rebote o ciclo) */
  75%, 97.5%    { transform: translateX(-33.333%); }

  /* Vuelta al inicio */
  100%          { transform: translateX(0%); }
}
10

Responsive: Adaptación a Móviles Verticales

Utilizamos la media query @media (orientation: portrait) para detectar si el dispositivo está en vertical (como un celular). Ajustamos la altura (--h) para que sea más alto y redefinimos los tamaños de fuente y padding para que sean legibles en pantallas estrechas.

@media (orientation: portrait) {
  .carousel {
    /* En vertical usamos el 65% de la altura de la pantalla */
    --h: 65dvh;
  }

  .carousel-caption {
    /* Ancho casi total y texto más grande */
    width: 70%;
    padding: 6dvw;
    gap: 4dvw;
    border-radius: 4dvw;
  }

  .carousel-title { font-size: 5dvw; }
  .carousel-text  { font-size: 3.2dvw; }

  .carousel-button {
    width: 70%;
    padding: 3.2dvw;
    font-size: 3.4dvw;
  }
}
11

Resultado Final: Desktop vs Mobile

El resultado es un componente robusto que mantiene la relación de aspecto cinematográfica en escritorio y cambia a un formato de 'historia' vertical en móviles, todo controlado por CSS moderno.

Comparativa del resultado final del carrusel en escritorio y móvil
Comparativa de responsividad: el mismo código HTML se adapta para ofrecer una experiencia panorámica en PC y vertical inmersiva en móviles.

Lección anterior

Diseño de barra de navegación responsive mostrándose en laptop y celular con menú hamburguesa
Vista previa del proyecto final: una barra de navegación que conserva su estética en escritorio y transforma su funcionalidad en móviles mediante CSS puro.

Cómo crear un Navbar Responsive solo con HTML y CSS

Crea un menú de navegación responsive profesional con HTML y CSS. Aprende Flexbox, Media Queries y el truco del Checkbox Hack para móviles, sin una sola línea de JavaScript.

Comenzar Lección

Lección actual

Resultado final del carrusel
Carrusel infinito y responsive

Cómo crear un Carrusel Infinito y Responsive solo con HTML y CSS

Usarás animaciones fluidas, variables CSS y diseño adaptativo para lograr un resultado profesional sin JavaScript.

Lección actual
¿Es realmente posible hacer un carrusel sin JavaScript?⌄Sí. Utilizando animaciones CSS (`@keyframes`) y transformaciones (`translateX`), podemos mover los elementos automáticamente en un bucle infinito sin necesidad de scripts.
¿Cuál es la ventaja de no usar JavaScript para un slider?⌄El rendimiento es mucho mejor porque la animación corre en el hilo del compositor del navegador (GPU), no bloquea el renderizado y funciona incluso si el usuario tiene JS desactivado.
¿Para qué sirve la variable `--slides` en el CSS?⌄Es una variable personalizada (Custom Property) que define cuántas diapositivas tiene el carrusel. Se usa en `calc()` para determinar el ancho total de la pista automáticamente.
¿Por qué el contenedor `.carousel` tiene `overflow: hidden`?⌄Actúa como una máscara o ventana. Oculta todo el contenido que se sale de sus bordes, permitiendo que solo veamos el slide actual mientras los demás esperan a los lados.
¿Qué hace exactamente `width: calc(var(--slides) * 100%)`?⌄Calcula el ancho de la pista interna. Si tienes 3 slides, el ancho será 300%. Esto es necesario para que los slides se coloquen uno al lado del otro horizontalmente.
¿Por qué usamos `display: flex` en `.carousel-inner`?⌄Flexbox coloca automáticamente los hijos directos (`.carousel-item`) en una fila horizontal, creando la estructura de tira larga necesaria para el deslizamiento.
¿Qué significa la unidad `dvw` utilizada en el código?⌄`dvw` (Dynamic Viewport Width) es una unidad relativa al ancho de la pantalla que tiene en cuenta las barras de herramientas dinámicas de los navegadores móviles, evitando saltos de tamaño.
¿Cómo funcionan los porcentajes en `@keyframes slide`?⌄Los porcentajes indican el momento de la animación. Por ejemplo, `0%` es el inicio y `100%` el final. Los intervalos intermedios definen cuándo mover la pista y cuándo pausarla.
¿Por qué hay rangos repetidos en los keyframes (ej: `0%, 22.5%`)?⌄Esos rangos crean las pausas. Al mantener el mismo valor de `transform` durante un periodo (del 0 al 22.5%), el carrusel se queda quieto para que el usuario pueda ver la imagen.
¿Por qué usamos valores negativos en `translateX`?⌄Porque para mostrar el siguiente slide (que está a la derecha), necesitamos mover toda la pista hacia la izquierda. `translateX(-33.33%)` mueve la pista un tercio hacia la izquierda.