{"id":12819,"date":"2026-05-12T18:29:27","date_gmt":"2026-05-12T16:29:27","guid":{"rendered":"https:\/\/avila.datasystem.es\/?p=12819"},"modified":"2026-05-12T18:47:02","modified_gmt":"2026-05-12T16:47:02","slug":"crear-carrusel-javascript","status":"publish","type":"post","link":"https:\/\/avila.datasystem.es\/en\/crear-carrusel-javascript\/","title":{"rendered":"Crear un carrusel con JavaScript paso a paso"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Los carruseles de im\u00e1genes de informaci\u00f3n probablemente sean el elemento m\u00e1s utilizado en los sitios web nuevos. Se utilizan para mostrar fotos, productos, proyectos o contenido destacado de una manera din\u00e1mica y atractiva. <br>En este tutorial, vas a <strong>crear un carrusel con JavaScript <\/strong>sencillo escribiendo algo de c\u00f3digo HTML, CSS y JavaScript, mientras comprendes c\u00f3mo funciona cada parte y c\u00f3mo puedes usar la misma l\u00f3gica, pero personalizarla en tus propios proyectos. Development muestra exactamente c\u00f3mo conectar los archivos y c\u00f3mo estructurar las im\u00e1genes, adem\u00e1s de c\u00f3mo integrar la l\u00f3gica con el movimiento de carrusel de lado a lado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png\" alt=\"Carrusel de im\u00e1genes creado con JavaScript HTML y CSS\" class=\"wp-image-7876\" srcset=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png 1024w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-300x169.png 300w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-768x432.png 768w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-18x10.png 18w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-como-vamos-a-crear-un-carrusel-con-javascript\">\u00bfC\u00f3mo vamos a crear un carrusel con JavaScript?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, antes de empezar a desarrollar lo que vamos a construir. B\u00e1sicamente, lo que quieres es <strong>crear un carrusel con JavaScript<\/strong> b\u00e1sico en el que las im\u00e1genes cambien con la ayuda de dos flechas laterales. Pero hay <strong>JavaScript<\/strong>, y este cambiar\u00e1 las im\u00e1genes sin recargar la p\u00e1gina.<br>Este tipo de carrusel con <strong>JavaScript<\/strong> se puede usar para:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tiendas en l\u00ednea<\/li>\n\n\n\n<li>Portafolios<\/li>\n\n\n\n<li>Sitios web corporativos<\/li>\n\n\n\n<li>Galer\u00edas de im\u00e1genes<\/li>\n\n\n\n<li>P\u00e1ginas de destino<\/li>\n\n\n\n<li>Presentaciones de productos<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-crear-la-estructura-html\">Crear la estructura HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El primer paso consiste en <a href=\"https:\/\/avila.datasystem.es\/wp-admin\/post.php?post=12819&amp;action=edit\">crear la estructura principal<\/a> del proyecto.<br>En el archivo HTML a\u00f1adiremos la conexi\u00f3n con CSS y JavaScript, adem\u00e1s de las im\u00e1genes y los botones que utilizaremos para mover el carrusel.<\/p>\n\n\n\n<h2 style=\"font-family: 'Arial Black'; font-size: 30px;\">1.CREAR HTML<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Carrusel&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;carrusel.css&quot;&gt;\n    &lt;script src=&quot;carrusel.js&quot; defer&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;section&gt;\n        &lt;div class=&quot;general&quot;&gt;\n            &lt;img src=&quot;fotos\/izq.jpg&quot; alt=&quot;&quot; id=&quot;izq&quot;&gt;\n            &lt;img src=&quot;fotos\/foto1.jpg&quot; alt=&quot;&quot; id=&quot;img&quot;&gt;\n            &lt;img src=&quot;fotos\/derecha.png&quot; alt=&quot;&quot; id=&quot;der&quot;&gt;\n    &lt;\/section&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explicaci\u00f3n del c\u00f3digo HTML<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro de esta estructura estamos definiendo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La conexi\u00f3n con el archivo CSS mediante la etiqueta <code>&lt;link&gt;<\/code><\/li>\n\n\n\n<li>La conexi\u00f3n con JavaScript gracias a <code>&lt;script&gt;<\/code><\/li>\n\n\n\n<li>La imagen principal del carrusel<\/li>\n\n\n\n<li>Las flechas laterales para navegar entre im\u00e1genes<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n es importante mantener una buena organizaci\u00f3n de carpetas para evitar errores al cargar las im\u00e1genes o los archivos del proyecto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-elementos-importantes-del-html\">Elementos importantes del HTML<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Archivo <code>.css<\/code> conectado correctamente <\/li>\n\n\n\n<li>Archivo <code>.js<\/code> enlazado al documento <\/li>\n\n\n\n<li>Imagen principal del carrusel <\/li>\n\n\n\n<li>Flechas de navegaci\u00f3n <\/li>\n\n\n\n<li>Organizaci\u00f3n de carpetas<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-crear-los-estilos-css\">Crear los estilos CSS<\/h2>\n\n\n\n<h2 style=\"font-family: 'Arial Black'; font-size: 30px;\">2.ESTILOS CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El siguiente paso consiste en dise\u00f1ar visualmente nuestro carrusel.<br>Con CSS podremos centrar el contenido, ajustar tama\u00f1os y mejorar la apariencia general del proyecto.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nsection{\n    width: 100vw;\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    .general{\n        width: 100%;\n        display: flex;\n        justify-content: space-around;\n        align-items: center;\n        #der, #izq{\n            height: 70px;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-explicacion-de-la-funcion\">Explicaci\u00f3n de la funci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este ejemplo utilizamos Flexbox para centrar todos los elementos dentro de la pantalla. Adem\u00e1s:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eliminamos m\u00e1rgenes autom\u00e1ticos<\/li>\n\n\n\n<li>Ajustamos el tama\u00f1o de las im\u00e1genes<\/li>\n\n\n\n<li>Centramos vertical y horizontalmente el contenido<\/li>\n\n\n\n<li>Aplicamos una estructura adaptable<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Esto permite que el carrusel tenga un dise\u00f1o limpio y ordenado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-recomendacion-importante\">Recomendaci\u00f3n importante<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es recomendable utilizar im\u00e1genes optimizadas para web, ya que fotograf\u00edas demasiado pesadas pueden ralentizar la carga de la p\u00e1gina.<br>Los formatos m\u00e1s utilizados son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JPG<\/li>\n\n\n\n<li>PNG<\/li>\n\n\n\n<li>WEBP<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:42% auto\"><figure class=\"wp-block-media-text__media\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"282\" src=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/Captura-de-pantalla-2025-04-21-185410.png\" alt=\"Carpeta de im\u00e1genes utilizada para el carrusel en JavaScript\" class=\"wp-image-7877 size-full\" srcset=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/Captura-de-pantalla-2025-04-21-185410.png 270w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/Captura-de-pantalla-2025-04-21-185410-11x12.png 11w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph\">Debemos crear previamente una carpeta llamada <code>fotos<\/code> donde almacenaremos todas las im\u00e1genes que se utilizar\u00e1n dentro del carrusel.<br>Mantener una estructura ordenada facilitar\u00e1 mucho el desarrollo del proyecto y evitar\u00e1 errores en las rutas de las im\u00e1genes.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-crear-las-variables-en-javascript\">Crear las variables en JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora comenzaremos con la parte din\u00e1mica del proyecto utilizando JavaScript.<br>Las variables ser\u00e1n fundamentales para controlar qu\u00e9 imagen se est\u00e1 mostrando en cada momento.<\/p>\n\n\n\n<h2 style=\"font-family: 'Arial Black'; font-size: 30px;\">3.CREACI\u00d3N VARIABLES<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>let fotos = &#091;\"foto1.jpg\", \"foto2.jpg\", \"foto3.jpg\"];\nlet x = 0;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La variable <code>fotos<\/code> almacena un array con todas las im\u00e1genes disponibles dentro del carrusel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><math xmlns=\"https:\/\/www.w3.org\/1998\/Math\/MathML\"><semantics><mrow><mi>x<\/mi><mo>=<\/mo><mn>0<\/mn><\/mrow><annotation encoding=\"application\/x-tex\">x=0<\/annotation><\/semantics><\/math>x=0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La variable <code>x<\/code> representa la posici\u00f3n actual dentro del array y nos permitir\u00e1 movernos entre im\u00e1genes de forma din\u00e1mica. Cuando el usuario pulse las flechas, este valor ir\u00e1 cambiando autom\u00e1ticamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-por-que-usar-un-array\">\u00bfPor qu\u00e9 usar un array?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los arrays permiten almacenar m\u00faltiples elementos dentro de una sola variable.<br>En este caso, utilizamos un array para guardar todas las im\u00e1genes que formar\u00e1n parte del carrusel.<br>Esto hace que el c\u00f3digo sea mucho m\u00e1s escalable y bastante sencillo para ser modificado en el futuro.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-funcion-para-mover-carrusel-de-imagenes-javascript-hacia-la-izquierda\">Funci\u00f3n para mover carrusel de im\u00e1genes JavaScript hacia la izquierda<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">El siguiente c\u00f3digo detecta cu\u00e1ndo el usuario pulsa la flecha izquierda.<\/p>\n\n\n\n<h2 style=\"font-family: 'Arial Black'; font-size: 30px;\">4. CREACI\u00d3N DE FUNCIONES<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector(\"#izq\").addEventListener(\"click\", function () {\n    x--;\n    if (x &lt; 0) {\n        x = fotos.length - 1;\n    }\n    document.querySelector(\"#img\").setAttribute(\"src\", \"fotos\/\"+fotos&#091;x]);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-como-funciona-esta-funcion\">\u00bfC\u00f3mo funciona esta funci\u00f3n?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuando hacemos clic en la flecha izquierda:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Restamos una posici\u00f3n a la variable <code>x<\/code><\/li>\n\n\n\n<li>Comprobamos si hemos llegado al inicio<\/li>\n\n\n\n<li>Si ocurre, volvemos autom\u00e1ticamente a la \u00faltima imagen<\/li>\n\n\n\n<li>Actualizamos la imagen mostrada<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Gracias a esta l\u00f3gica conseguimos un efecto c\u00edclico continuo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-funcion-para-mover-el-carrusel-de-imagenes-javascript-hacia-la-derecha\">Funci\u00f3n para mover el carrusel de im\u00e1genes JavaScript hacia la derecha<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora crearemos la funci\u00f3n para avanzar im\u00e1genes.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelector(\"#der\").addEventListener(\"click\", function () {\n    x ++;\n    if (x &gt;= fotos.length) {\n        x = 0;\n    }\n    document.querySelector(\"#img\").setAttribute(\"src\", \"fotos\/\"+fotos&#091;x]);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-explicacion-de-la-funcion-0\">Explicaci\u00f3n de la funci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este caso:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sumamos una posici\u00f3n al array<\/li>\n\n\n\n<li>Comprobamos si hemos llegado al final<\/li>\n\n\n\n<li>Si ocurre, volvemos autom\u00e1ticamente a la primera imagen<\/li>\n\n\n\n<li>Actualizamos la fotograf\u00eda visible<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Este sistema permite navegar infinitamente entre im\u00e1genes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-consejos-para-mejorar-tu-carrusel-de-imagenes-javascript\">Consejos para mejorar tu carrusel de im\u00e1genes JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez tengas funcionando <strong>slider con JavaScript<\/strong> b\u00e1sico, puedes a\u00f1adir nuevas funcionalidades para hacerlo m\u00e1s profesional:<br><strong>Ideas de mejora:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A\u00f1adir transici\u00f3n suave entre im\u00e1genes<\/li>\n\n\n\n<li>Incorporar reproducci\u00f3n autom\u00e1tica<\/li>\n\n\n\n<li>Adaptarlo a m\u00f3viles<\/li>\n\n\n\n<li>Agregar indicadores inferiores<\/li>\n\n\n\n<li>Incluir texto sobre las im\u00e1genes<\/li>\n\n\n\n<li>Crear animaciones con CSS<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-errores-comunes-al-crear-un-carrusel-con-javascript\">Errores comunes al crear un carrusel con JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Muchos errores suelen producirse por peque\u00f1os detalles:<br><strong>Revisa siempre:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Las rutas de las im\u00e1genes<\/li>\n\n\n\n<li>Los nombres de archivos<\/li>\n\n\n\n<li>Las may\u00fasculas y min\u00fasculas<\/li>\n\n\n\n<li>La conexi\u00f3n correcta de CSS y JavaScript<\/li>\n\n\n\n<li>Que las im\u00e1genes existan dentro de la carpeta<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Crear un carrusel con JavaScript<\/strong> es un excelente ejercicio para aprender c\u00f3mo interact\u00faan HTML, CSS y JavaScript dentro de un proyecto real.<br>Aunque este ejemplo es sencillo, la l\u00f3gica utilizada es la base de muchos sliders y galer\u00edas profesionales que encontramos actualmente en internet.<br>Una vez domines esta estructura podr\u00e1s crear carruseles mucho m\u00e1s avanzados y personalizados para cualquier tipo de p\u00e1gina web.<\/p>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\"><em>Si quieres seguir aprendiendo JavaScript y mejorar tus proyectos web, puedes complementar este tutorial con un v\u00eddeo pr\u00e1ctico donde se explique visualmente c\u00f3mo <strong>crear un carrusel con JavaScript <\/strong>paso a paso.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Responsive Image Slider | With Manual Button &amp; Auto-play - HTML CSS Javascript\" width=\"900\" height=\"506\" src=\"https:\/\/www.youtube.com\/embed\/DpHi9Ruu8R4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-preguntas-frecuentes-sobre-carruseles-en-javascript\">Preguntas frecuentes sobre carruseles en JavaScript<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1778602606738\"><strong class=\"schema-faq-question\">\u00bfSe puede hacer responsive?<\/strong> <p class=\"schema-faq-answer\">S\u00ed. Utilizando media queries en CSS puedes adaptar el carrusel a m\u00f3viles y tablets f\u00e1cilmente.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778602621173\"><strong class=\"schema-faq-question\">\u00bfPuedo a\u00f1adir animaciones?<\/strong> <p class=\"schema-faq-answer\">S\u00ed. Puedes utilizar <code>transition<\/code> en CSS para crear desplazamientos suaves entre im\u00e1genes.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778602632972\"><strong class=\"schema-faq-question\">\u00bfEs necesario usar librer\u00edas?<\/strong> <p class=\"schema-faq-answer\">No. Este ejemplo funciona \u00fanicamente con JavaScript puro.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1778602650310\"><strong class=\"schema-faq-question\">\u00bfPuedo a\u00f1adir m\u00e1s im\u00e1genes?<\/strong> <p class=\"schema-faq-answer\">S\u00ed. Solo debes agregar nuevas im\u00e1genes dentro del array.<\/p> <\/div> <\/div>\n\n\n\n<ul class=\"wp-block-social-links aligncenter is-layout-flex wp-block-social-links-is-layout-flex\"><li class=\"wp-social-link wp-social-link-facebook wp-block-social-link\"><a href=\"https:\/\/www.facebook.com\/informaticayelectronicamadrid\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Facebook<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-instagram wp-block-social-link\"><a href=\"https:\/\/www.instagram.com\/datasystemelectronica\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">Instagram<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-linkedin wp-block-social-link\"><a href=\"https:\/\/www.linkedin.com\/company\/datasystem\/\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">LinkedIn<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-x wp-block-social-link\"><a href=\"https:\/\/x.com\/datasystemm\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z\" \/><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">X<\/span><\/a><\/li>\n\n<li class=\"wp-social-link wp-social-link-youtube wp-block-social-link\"><a href=\"https:\/\/www.youtube.com\/@data-system\" class=\"wp-block-social-link-anchor\"><svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z\"><\/path><\/svg><span class=\"wp-block-social-link-label screen-reader-text\">YouTube<\/span><\/a><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"150\" src=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2026\/04\/logo-data-system-450x150-1.png\" alt=\"reparaci\u00f3n\" class=\"wp-image-12063\" srcset=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2026\/04\/logo-data-system-450x150-1.png 450w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2026\/04\/logo-data-system-450x150-1-300x100.png 300w, https:\/\/avila.datasystem.es\/wp-content\/uploads\/2026\/04\/logo-data-system-450x150-1-18x6.png 18w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u00a9 Copyright 2026. Todos los derechos reservados, hecho por <a href=\"https:\/\/www.datasystem.es\">Data System<\/a><\/em><\/p>\n\n\n\n<div style=\"height:52px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Los carruseles de im\u00e1genes de informaci\u00f3n probablemente sean el elemento m\u00e1s utilizado en los sitios web nuevos. Se utilizan para mostrar fotos, productos, proyectos o contenido destacado de una manera din\u00e1mica y atractiva. En este tutorial, vas a crear un carrusel con JavaScript sencillo escribiendo algo de c\u00f3digo HTML, CSS y JavaScript, mientras comprendes c\u00f3mo [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12819","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Crear un Carrusel con JavaScript | Tutorial HTML CSS y JS<\/title>\n<meta name=\"description\" content=\"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avila.datasystem.es\/en\/crear-carrusel-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un carrusel con JavaScript paso a paso\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avila.datasystem.es\/en\/crear-carrusel-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Reparaci\u00f3n de ordenadores a domicilio - Data System\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/m.facebook.com\/informaticayelectronicamadrid\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-12T16:29:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T16:47:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"REPARAR AVILA\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@datasystemm\" \/>\n<meta name=\"twitter:site\" content=\"@datasystemm\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"REPARAR AVILA\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/\"},\"author\":{\"name\":\"REPARAR AVILA\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#\\\/schema\\\/person\\\/e5cf468cdeaab2fda69dc3513d76cba4\"},\"headline\":\"Crear un carrusel con JavaScript paso a paso\",\"datePublished\":\"2026-05-12T16:29:27+00:00\",\"dateModified\":\"2026-05-12T16:47:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/\"},\"wordCount\":1106,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/image-17-1024x576.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/\",\"name\":\"Crear un Carrusel con JavaScript | Tutorial HTML CSS y JS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/image-17-1024x576.png\",\"datePublished\":\"2026-05-12T16:29:27+00:00\",\"dateModified\":\"2026-05-12T16:47:02+00:00\",\"description\":\"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602606738\"},{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602621173\"},{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602632972\"},{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602650310\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/image-17-1024x576.png\",\"contentUrl\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/image-17-1024x576.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/avila.datasystem.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crear un carrusel con JavaScript paso a paso\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#website\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/\",\"name\":\"Reparaci\u00f3n de ordenadores a domicilio - Data System\",\"description\":\"Servicio t\u00e9cnico cualificado de reparaci\u00f3n de ordenadores a domicilio para particulares y empresas\",\"publisher\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/avila.datasystem.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Organization\",\"Place\"],\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#organization\",\"name\":\"Reparaci\u00f3n de ordenadores a domicilio- Data System\",\"alternateName\":\"Servicio T\u00e9cnico Inform\u00e1tico a domicilio\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/\",\"logo\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#local-main-organization-logo\"},\"image\":{\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#local-main-organization-logo\"},\"sameAs\":[\"https:\\\/\\\/m.facebook.com\\\/informaticayelectronicamadrid\\\/\",\"https:\\\/\\\/x.com\\\/datasystemm\",\"https:\\\/\\\/mastodon.social\\\/@datasystem\"],\"telephone\":[],\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"],\"opens\":\"09:00\",\"closes\":\"17:00\"}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/#\\\/schema\\\/person\\\/e5cf468cdeaab2fda69dc3513d76cba4\",\"name\":\"REPARAR AVILA\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/en\\\/author\\\/repararavila2026\\\/\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602606738\",\"position\":1,\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602606738\",\"name\":\"\u00bfSe puede hacer responsive?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00ed. Utilizando media queries en CSS puedes adaptar el carrusel a m\u00f3viles y tablets f\u00e1cilmente.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602621173\",\"position\":2,\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602621173\",\"name\":\"\u00bfPuedo a\u00f1adir animaciones?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00ed. Puedes utilizar transition en CSS para crear desplazamientos suaves entre im\u00e1genes.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602632972\",\"position\":3,\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602632972\",\"name\":\"\u00bfEs necesario usar librer\u00edas?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"No. Este ejemplo funciona \u00fanicamente con JavaScript puro.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602650310\",\"position\":4,\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#faq-question-1778602650310\",\"name\":\"\u00bfPuedo a\u00f1adir m\u00e1s im\u00e1genes?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"S\u00ed. Solo debes agregar nuevas im\u00e1genes dentro del array.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/avila.datasystem.es\\\/crear-carrusel-javascript\\\/#local-main-organization-logo\",\"url\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/LOGO-DATAC.jpeg\",\"contentUrl\":\"https:\\\/\\\/avila.datasystem.es\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/LOGO-DATAC.jpeg\",\"width\":648,\"height\":652,\"caption\":\"Reparaci\u00f3n de ordenadores a domicilio- Data System\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crear un Carrusel con JavaScript | Tutorial HTML CSS y JS","description":"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avila.datasystem.es\/en\/crear-carrusel-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Crear un carrusel con JavaScript paso a paso","og_description":"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.","og_url":"https:\/\/avila.datasystem.es\/en\/crear-carrusel-javascript\/","og_site_name":"Reparaci\u00f3n de ordenadores a domicilio - Data System","article_publisher":"https:\/\/m.facebook.com\/informaticayelectronicamadrid\/","article_published_time":"2026-05-12T16:29:27+00:00","article_modified_time":"2026-05-12T16:47:02+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17.png","type":"image\/png"}],"author":"REPARAR AVILA","twitter_card":"summary_large_image","twitter_creator":"@datasystemm","twitter_site":"@datasystemm","twitter_misc":{"Written by":"REPARAR AVILA","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#article","isPartOf":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/"},"author":{"name":"REPARAR AVILA","@id":"https:\/\/avila.datasystem.es\/#\/schema\/person\/e5cf468cdeaab2fda69dc3513d76cba4"},"headline":"Crear un carrusel con JavaScript paso a paso","datePublished":"2026-05-12T16:29:27+00:00","dateModified":"2026-05-12T16:47:02+00:00","mainEntityOfPage":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/"},"wordCount":1106,"commentCount":0,"publisher":{"@id":"https:\/\/avila.datasystem.es\/#organization"},"image":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/","url":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/","name":"Crear un Carrusel con JavaScript | Tutorial HTML CSS y JS","isPartOf":{"@id":"https:\/\/avila.datasystem.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#primaryimage"},"image":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png","datePublished":"2026-05-12T16:29:27+00:00","dateModified":"2026-05-12T16:47:02+00:00","description":"Aprende a crear un carrusel con JavaScript paso a paso utilizando HTML, CSS y JS. Tutorial para principiantes con ejemplos y explicaci\u00f3n.","breadcrumb":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602606738"},{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602621173"},{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602632972"},{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602650310"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#primaryimage","url":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png","contentUrl":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2025\/04\/image-17-1024x576.png"},{"@type":"BreadcrumbList","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/avila.datasystem.es\/"},{"@type":"ListItem","position":2,"name":"Crear un carrusel con JavaScript paso a paso"}]},{"@type":"WebSite","@id":"https:\/\/avila.datasystem.es\/#website","url":"https:\/\/avila.datasystem.es\/","name":"Reparaci\u00f3n de ordenadores a domicilio - Data System","description":"Servicio t\u00e9cnico cualificado de reparaci\u00f3n de ordenadores a domicilio para particulares y empresas","publisher":{"@id":"https:\/\/avila.datasystem.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avila.datasystem.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Organization","Place"],"@id":"https:\/\/avila.datasystem.es\/#organization","name":"Reparaci\u00f3n de ordenadores a domicilio- Data System","alternateName":"Servicio T\u00e9cnico Inform\u00e1tico a domicilio","url":"https:\/\/avila.datasystem.es\/","logo":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#local-main-organization-logo"},"image":{"@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#local-main-organization-logo"},"sameAs":["https:\/\/m.facebook.com\/informaticayelectronicamadrid\/","https:\/\/x.com\/datasystemm","https:\/\/mastodon.social\/@datasystem"],"telephone":[],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"09:00","closes":"17:00"}]},{"@type":"Person","@id":"https:\/\/avila.datasystem.es\/#\/schema\/person\/e5cf468cdeaab2fda69dc3513d76cba4","name":"REPARAR AVILA","url":"https:\/\/avila.datasystem.es\/en\/author\/repararavila2026\/"},{"@type":"Question","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602606738","position":1,"url":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602606738","name":"\u00bfSe puede hacer responsive?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"S\u00ed. Utilizando media queries en CSS puedes adaptar el carrusel a m\u00f3viles y tablets f\u00e1cilmente.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602621173","position":2,"url":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602621173","name":"\u00bfPuedo a\u00f1adir animaciones?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"S\u00ed. Puedes utilizar transition en CSS para crear desplazamientos suaves entre im\u00e1genes.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602632972","position":3,"url":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602632972","name":"\u00bfEs necesario usar librer\u00edas?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"No. Este ejemplo funciona \u00fanicamente con JavaScript puro.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602650310","position":4,"url":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#faq-question-1778602650310","name":"\u00bfPuedo a\u00f1adir m\u00e1s im\u00e1genes?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"S\u00ed. Solo debes agregar nuevas im\u00e1genes dentro del array.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avila.datasystem.es\/crear-carrusel-javascript\/#local-main-organization-logo","url":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2023\/02\/LOGO-DATAC.jpeg","contentUrl":"https:\/\/avila.datasystem.es\/wp-content\/uploads\/2023\/02\/LOGO-DATAC.jpeg","width":648,"height":652,"caption":"Reparaci\u00f3n de ordenadores a domicilio- Data System"}]}},"_links":{"self":[{"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/posts\/12819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/comments?post=12819"}],"version-history":[{"count":3,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/posts\/12819\/revisions"}],"predecessor-version":[{"id":12854,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/posts\/12819\/revisions\/12854"}],"wp:attachment":[{"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/media?parent=12819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/categories?post=12819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avila.datasystem.es\/en\/wp-json\/wp\/v2\/tags?post=12819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}