Crear un carrusel con JavaScript paso a paso

Los carruseles de imágenes de información probablemente sean el elemento más utilizado en los sitios web nuevos. Se utilizan para mostrar fotos, productos, proyectos o contenido destacado de una manera dinámica y atractiva.
En este tutorial, vas a crear un carrusel con JavaScript sencillo escribiendo algo de código HTML, CSS y JavaScript, mientras comprendes cómo funciona cada parte y cómo puedes usar la misma lógica, pero personalizarla en tus propios proyectos. Development muestra exactamente cómo conectar los archivos y cómo estructurar las imágenes, además de cómo integrar la lógica con el movimiento de carrusel de lado a lado.

Carrusel de imágenes creado con JavaScript HTML y CSS

¿Cómo vamos a crear un carrusel con JavaScript?

Ahora, antes de empezar a desarrollar lo que vamos a construir. Básicamente, lo que quieres es crear un carrusel con JavaScript básico en el que las imágenes cambien con la ayuda de dos flechas laterales. Pero hay JavaScript, y este cambiará las imágenes sin recargar la página.
Este tipo de carrusel con JavaScript se puede usar para:

Tiendas en línea
Portafolios
Sitios web corporativos
Galerías de imágenes
Páginas de destino
Presentaciones de productos

Crear la estructura HTML

El primer paso consiste en crear la estructura principal del proyecto.
En el archivo HTML añadiremos la conexión con CSS y JavaScript, además de las imágenes y los botones que utilizaremos para mover el carrusel.

1.CREAR HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrusel</title>
    <link rel="stylesheet" href="carrusel.css">
    <script src="carrusel.js" defer></script>
</head>
<body>
    <section>
        <div class="general">
            <img src="fotos/izq.jpg" alt="" id="izq">
            <img src="fotos/foto1.jpg" alt="" id="img">
            <img src="fotos/derecha.png" alt="" id="der">
    </section>
</body>
</html>

Explicación del código HTML

Dentro de esta estructura estamos definiendo:

La conexión con el archivo CSS mediante la etiqueta <link>
La conexión con JavaScript gracias a <script>
La imagen principal del carrusel
Las flechas laterales para navegar entre imágenes

También es importante mantener una buena organización de carpetas para evitar errores al cargar las imágenes o los archivos del proyecto.

Elementos importantes del HTML

Archivo .css conectado correctamente
Archivo .js enlazado al documento
Imagen principal del carrusel
Flechas de navegación
Organización de carpetas

Crear los estilos CSS

2.ESTILOS CSS

El siguiente paso consiste en diseñar visualmente nuestro carrusel.
Con CSS podremos centrar el contenido, ajustar tamaños y mejorar la apariencia general del proyecto.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .general{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        #der, #izq{
            height: 70px;
        }
    }
}

Explicación de la función

En este ejemplo utilizamos Flexbox para centrar todos los elementos dentro de la pantalla. Además:

Eliminamos márgenes automáticos
Ajustamos el tamaño de las imágenes
Centramos vertical y horizontalmente el contenido
Aplicamos una estructura adaptable

Esto permite que el carrusel tenga un diseño limpio y ordenado.

Recomendación importante

Es recomendable utilizar imágenes optimizadas para web, ya que fotografías demasiado pesadas pueden ralentizar la carga de la página.
Los formatos más utilizados son:

JPG
PNG
WEBP

Carpeta de imágenes utilizada para el carrusel en JavaScript

Debemos crear previamente una carpeta llamada fotos donde almacenaremos todas las imágenes que se utilizarán dentro del carrusel.
Mantener una estructura ordenada facilitará mucho el desarrollo del proyecto y evitará errores en las rutas de las imágenes.

Crear las variables en JavaScript

Ahora comenzaremos con la parte dinámica del proyecto utilizando JavaScript.
Las variables serán fundamentales para controlar qué imagen se está mostrando en cada momento.

3.CREACIÓN VARIABLES

let fotos = ["foto1.jpg", "foto2.jpg", "foto3.jpg"];
let x = 0;

La variable fotos almacena un array con todas las imágenes disponibles dentro del carrusel.

$x=0$ x=0

La variable x representa la posición actual dentro del array y nos permitirá movernos entre imágenes de forma dinámica. Cuando el usuario pulse las flechas, este valor irá cambiando automáticamente.

¿Por qué usar un array?

Los arrays permiten almacenar múltiples elementos dentro de una sola variable.
En este caso, utilizamos un array para guardar todas las imágenes que formarán parte del carrusel.
Esto hace que el código sea mucho más escalable y bastante sencillo para ser modificado en el futuro.

Función para mover carrusel de imágenes JavaScript hacia la izquierda

El siguiente código detecta cuándo el usuario pulsa la flecha izquierda.

4. CREACIÓN DE FUNCIONES

document.querySelector("#izq").addEventListener("click", function () {
    x--;
    if (x < 0) {
        x = fotos.length - 1;
    }
    document.querySelector("#img").setAttribute("src", "fotos/"+fotos[x]);
});

¿Cómo funciona esta función?

Cuando hacemos clic en la flecha izquierda:

Restamos una posición a la variable x
Comprobamos si hemos llegado al inicio
Si ocurre, volvemos automáticamente a la última imagen
Actualizamos la imagen mostrada

Gracias a esta lógica conseguimos un efecto cíclico continuo.

Función para mover el carrusel de imágenes JavaScript hacia la derecha

Ahora crearemos la función para avanzar imágenes.

document.querySelector("#der").addEventListener("click", function () {
    x ++;
    if (x >= fotos.length) {
        x = 0;
    }
    document.querySelector("#img").setAttribute("src", "fotos/"+fotos[x]);
});

Explicación de la función

En este caso:

Sumamos una posición al array
Comprobamos si hemos llegado al final
Si ocurre, volvemos automáticamente a la primera imagen
Actualizamos la fotografía visible

Este sistema permite navegar infinitamente entre imágenes.

Consejos para mejorar tu carrusel de imágenes JavaScript

Una vez tengas funcionando slider con JavaScript básico, puedes añadir nuevas funcionalidades para hacerlo más profesional:
Ideas de mejora:

Añadir transición suave entre imágenes
Incorporar reproducción automática
Adaptarlo a móviles
Agregar indicadores inferiores
Incluir texto sobre las imágenes
Crear animaciones con CSS

Errores comunes al crear un carrusel con JavaScript

Muchos errores suelen producirse por pequeños detalles:
Revisa siempre:

Las rutas de las imágenes
Los nombres de archivos
Las mayúsculas y minúsculas
La conexión correcta de CSS y JavaScript
Que las imágenes existan dentro de la carpeta

Conclusión

Crear un carrusel con JavaScript es un excelente ejercicio para aprender cómo interactúan HTML, CSS y JavaScript dentro de un proyecto real.
Aunque este ejemplo es sencillo, la lógica utilizada es la base de muchos sliders y galerías profesionales que encontramos actualmente en internet.
Una vez domines esta estructura podrás crear carruseles mucho más avanzados y personalizados para cualquier tipo de página web.

Si quieres seguir aprendiendo JavaScript y mejorar tus proyectos web, puedes complementar este tutorial con un vídeo práctico donde se explique visualmente cómo crear un carrusel con JavaScript paso a paso.

Preguntas frecuentes sobre carruseles en JavaScript

¿Se puede hacer responsive?

Sí. Utilizando media queries en CSS puedes adaptar el carrusel a móviles y tablets fácilmente.

¿Puedo añadir animaciones?

Sí. Puedes utilizar transition en CSS para crear desplazamientos suaves entre imágenes.

¿Es necesario usar librerías?

No. Este ejemplo funciona únicamente con JavaScript puro.

¿Puedo añadir más imágenes?

Sí. Solo debes agregar nuevas imágenes dentro del array.

Blog