{"id":14787,"date":"2023-10-27T12:18:41","date_gmt":"2023-10-27T10:18:41","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=14787"},"modified":"2023-11-03T21:04:40","modified_gmt":"2023-11-03T19:04:40","slug":"crear-slider-dinamico-html-css-javascript","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/","title":{"rendered":"C\u00f3mo Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript"},"content":{"rendered":"

En el dise\u00f1o web, un slider din\u00e1mico<\/strong>\u00a0es una herramienta esencial para presentar visualmente contenido de manera organizada y atractiva. Esta funcionalidad mejora la interactividad, permitiendo a los visitantes explorar m\u00faltiples im\u00e1genes o piezas de contenido de una manera intuitiva.<\/p>\n

En este tutorial, te guiar\u00e9 a trav\u00e9s del proceso de creaci\u00f3n de un slider de im\u00e1genes utilizando HTML, CSS y JavaScript<\/strong>. Con ejemplos pr\u00e1cticos, aprender\u00e1s c\u00f3mo combinar estas tres tecnolog\u00edas fundamentales para dise\u00f1ar un slider visualmente agradable y funcional en tu sitio web.<\/p>\n

Estructura HTML<\/h2>\n

La base de cualquier slider din\u00e1mico reside en una estructura HTML s\u00f3lida y bien organizada<\/strong>. Esta estructura nos permite definir c\u00f3mo se organizar\u00e1n y mostrar\u00e1n las im\u00e1genes en nuestra p\u00e1gina web.<\/p>\n

Creando el HTML para Slider Din\u00e1mico<\/h3>\n

Crear un HTML sem\u00e1ntico y estructurado es crucial para la accesibilidad y la buena pr\u00e1ctica en el desarrollo web. En este segmento, elaboraremos el HTML necesario para el slider, utilizando las etiquetas HTML5 para mantener la sem\u00e1ntica<\/strong><\/a> y la estructura clara.<\/p>\n

<section id=\"gallery\">\r\n    <div class=\"gallery-container\">\r\n        <figure class=\"gallery-item\">\r\n            <img src=\"image1.jpg\" alt=\"Imagen 1\">\r\n            <figcaption>Descripci\u00f3n de la imagen 1<\/figcaption>\r\n        <\/figure>\r\n        <figure class=\"gallery-item\">\r\n            <img src=\"image2.jpg\" alt=\"Imagen 2\">\r\n            <figcaption>Descripci\u00f3n de la imagen 2<\/figcaption>\r\n        <\/figure>\r\n        <figure class=\"gallery-item\">\r\n            <img src=\"image3.jpg\" alt=\"Imagen 3\">\r\n            <figcaption>Descripci\u00f3n de la imagen 3<\/figcaption>\r\n        <\/figure>\r\n        <!-- ... otras im\u00e1genes ... -->\r\n    <\/div>\r\n    <nav class=\"gallery-navigation\">\r\n        <button class=\"nav-button prev-button\">Anterior<\/button>\r\n        <button class=\"nav-button next-button\">Siguiente<\/button>\r\n    <\/nav>\r\n<\/section><\/pre>\n
En este c\u00f3digo:<\/strong><\/p>\n
    \n
  1. Utilizamos la etiqueta <section><\/code> para encapsular nuestro slider, proporcionando un contenedor sem\u00e1ntico.<\/li>\n
  2. Dentro de la secci\u00f3n, tenemos un div<\/code> con la clase gallery-container<\/code> que aloja todos los elementos del slider.<\/li>\n
  3. Cada imagen se envuelve en una etiqueta <figure><\/code>, que es una etiqueta HTML5 sem\u00e1ntica<\/strong> para el contenido autocontenido con una etiqueta opcional <figcaption><\/code> para proporcionar una descripci\u00f3n.<\/li>\n
  4. Tambi\u00e9n hemos incluido una secci\u00f3n de navegaci\u00f3n <nav><\/code> con dos botones que permitir\u00e1n a los usuarios navegar a trav\u00e9s de las im\u00e1genes.<\/li>\n<\/ol>\n
    Estilizando con CSS<\/h2>\n
    Estilizar correctamente nuestro slider es crucial para asegurar una apariencia atractiva y una experiencia de usuario fluida. Con CSS (Cascading Style Sheets), podemos definir el layout, colores, transiciones<\/strong> y otros aspectos visuales de nuestro slider. A continuaci\u00f3n, exploraremos c\u00f3mo aplicar estilos CSS para lograr un dise\u00f1o elegante y funcional<\/strong>.<\/p>\n
    Dise\u00f1ando el Slider<\/h3>\n
    \/* Estilo b\u00e1sico para el Slider*\/\r\n#gallery {\r\n   width: 80%;\r\n   margin: auto;\r\n   overflow: hidden;\r\n}\r\n\r\n.gallery-container {\r\n   display: flex;\r\n   transition: transform 0.5s ease-in-out;\r\n}\r\n\r\n.gallery-item {\r\n   min-width: 100%;\r\n   box-sizing: border-box;\r\n}\r\n\r\n.gallery-item img {\r\n   width: 100%;\r\n   display: block;\r\n}\r\n\r\n\/* Navegaci\u00f3n del Slider *\/\r\n.gallery-navigation {\r\n   display: flex;\r\n   justify-content: space-between;\r\n   position: relative;\r\n   top: -50px;\r\n}\r\n\r\n.nav-button {\r\n   background-color: #008CBA;\r\n   color: white;\r\n   border: none;\r\n   padding: 10px 20px;\r\n   cursor: pointer;\r\n   border-radius: 5px;\r\n}\r\n\r\n.nav-button:hover {\r\nbackground-color: #005f5f;\r\n}<\/pre>\n
    En este c\u00f3digo:<\/strong><\/p>\n
      \n
    1. Definimos un ancho y margen para la secci\u00f3n del slider (#gallery<\/code>) para centrarla en la p\u00e1gina y evitar el desbordamiento.<\/li>\n
    2. Utilizamos display: flex;<\/code><\/strong> en .gallery-container<\/code> para organizar los elementos del slider en una fila. La propiedad transition<\/code><\/strong> se aplica para suavizar cualquier cambio en la propiedad transform<\/code><\/strong>, que se utilizar\u00e1 m\u00e1s tarde para deslizar las im\u00e1genes.<\/li>\n
    3. Establecemos un ancho m\u00ednimo (min-width<\/code>) para .gallery-item<\/code> para asegurar que cada elemento del slider ocupe todo el ancho disponible, y utilizamos box-sizing: border-box;<\/code> para incluir el padding y el borde en el ancho del elemento.<\/li>\n
    4. Aseguramos que las im\u00e1genes sean responsivas y se ajusten al ancho del contenedor usando width: 100%;<\/code>.<\/li>\n
    5. Para la navegaci\u00f3n, utilizamos display: flex;<\/code> y justify-content: space-between;<\/code> en .gallery-navigation<\/code> para posicionar los botones en los extremos opuestos del contenedor, y ajustamos la posici\u00f3n y el estilo de los botones con CSS adicional.<\/li>\n<\/ol>\n
      Con estos estilos CSS, hemos creado una base visual para nuestro slider, prepar\u00e1ndola para la interactividad que JavaScript aportar\u00e1 en los siguientes pasos.<\/p>\n
      A\u00f1adiendo Interactividad con JavaScript<\/h2>\n
      La interactividad es un componente clave para cualquier slider. Con JavaScript, podemos a\u00f1adir funcionalidades como la navegaci\u00f3n entre im\u00e1genes, haciendo nuestro slider mucho m\u00e1s interactivo y amigable<\/strong> para el usuario. En esta secci\u00f3n, vamos a explorar c\u00f3mo usar JavaScript para a\u00f1adir esta funcionalidad:<\/p>\n
      <script>\r\nlet currentIndex = 0;\r\n\r\ndocument.querySelector('.prev-button').addEventListener('click', () => {\r\n   navigate(-1);\r\n});\r\n\r\ndocument.querySelector('.next-button').addEventListener('click', () => {\r\n   navigate(1);\r\n});\r\n\r\nfunction navigate(direction) {\r\n   const galleryContainer = document.querySelector('.gallery-container');\r\n   const totalImages = document.querySelectorAll('.gallery-item').length;\r\n\r\n   currentIndex = (currentIndex + direction + totalImages) % totalImages;\r\n   const offset = -currentIndex * 100;\r\n\r\n   galleryContainer.style.transform = `translateX(${offset}%)`;\r\n}\r\n<\/script><\/pre>\n
      En este c\u00f3digo:<\/strong><\/p>\n
        \n
      1. Inicializamos una variable currentIndex<\/code> para mantener un registro de la imagen actual que se est\u00e1 mostrando en el slider.<\/li>\n
      2. Agregamos event listeners<\/strong> a los botones de navegaci\u00f3n. Cuando se hace clic en estos botones, llamamos a la funci\u00f3n navigate<\/code> con una direcci\u00f3n de -1 (anterior) o 1 (siguiente), respectivamente.<\/li>\n
      3. Dentro de la funci\u00f3n navigate<\/code>, actualizamos currentIndex<\/code> basado en la direcci\u00f3n proporcionada, y calculamos el desplazamiento necesario (offset<\/code>) para mostrar la imagen deseada.<\/li>\n
      4. Finalmente, usamos transform: translateX()<\/code> en el contenedor del slider para desplazarse a la posici\u00f3n correcta, mostrando la imagen correspondiente.<\/li>\n<\/ol>\n
        Con estas l\u00edneas de JavaScript, hemos a\u00f1adido una funcionalidad b\u00e1sica de navegaci\u00f3n a nuestro slider, permitiendo a los usuarios explorar las im\u00e1genes de manera interactiva. Este es un primer paso hacia un slider din\u00e1mico y atractivo que puede ser ampliamente personalizado con m\u00e1s c\u00f3digo y estilos.<\/p>\n
        Implementando una Funci\u00f3n de Autoplay al Slider din\u00e1mico<\/h3>\n
        Agregar una funci\u00f3n de autoplay a nuestro slider permite a las im\u00e1genes cambiar autom\u00e1ticamente cada cierto tiempo, proporcionando una experiencia de usuario din\u00e1mica sin necesidad de interactuar con los botones de navegaci\u00f3n. A continuaci\u00f3n, implementaremos esta funcionalidad utilizando JavaScript.<\/p>\n
        <script>\r\nlet autoplayInterval = null;\r\n\r\nfunction startAutoplay(interval) {\r\n   stopAutoplay(); \/\/ Detiene cualquier autoplay anterior para evitar m\u00faltiples intervalos.\r\n   autoplayInterval = setInterval(() => {\r\n      navigate(1); \/\/ Navega a la siguiente imagen cada intervalo de tiempo.\r\n   }, interval);\r\n}\r\n\r\nfunction stopAutoplay() {\r\n   clearInterval(autoplayInterval);\r\n}\r\n\r\n\/\/ Iniciar autoplay con un intervalo de 3 segundos.\r\nstartAutoplay(3000);\r\n\r\n\/\/ Opcional: Detener autoplay cuando el usuario interact\u00faa con los botones de navegaci\u00f3n.\r\ndocument.querySelectorAll('.nav-button').forEach(button => {\r\n    button.addEventListener('click', stopAutoplay);\r\n});\r\n<\/script><\/pre>\n
        En este c\u00f3digo:<\/strong><\/p>\n
          \n
        1. Definimos una variable autoplayInterval<\/code><\/strong> para mantener el identificador del intervalo del autoplay.<\/li>\n
        2. Creamos la funci\u00f3n startAutoplay<\/code><\/strong> que toma un intervalo de tiempo (en milisegundos) como argumento. Esta funci\u00f3n detiene cualquier autoplay anterior (para evitar m\u00faltiples intervalos) y luego inicia un nuevo intervalo que llama a la funci\u00f3n navigate<\/code> con una direcci\u00f3n de 1 (siguiente) cada intervalo de tiempo.<\/li>\n
        3. Tambi\u00e9n creamos la funci\u00f3n stopAutoplay<\/code><\/strong> para detener el autoplay, que puede ser \u00fatil si deseas proporcionar una opci\u00f3n para detener el autoplay o si deseas detener el autoplay cuando el usuario interact\u00faa con el slider.<\/li>\n
        4. Iniciamos el autoplay llamando a startAutoplay<\/code> con un intervalo de 3 segundos.<\/li>\n
        5. Opcionalmente, detenemos el autoplay cuando el usuario hace clic en los botones de navegaci\u00f3n, lo que puede ser una buena pr\u00e1ctica para evitar que el autoplay desoriente al usuario si decide navegar manualmente a trav\u00e9s de las im\u00e1genes.<\/li>\n<\/ol>\n
          Con estas funciones, hemos a\u00f1adido una funcionalidad de autoplay a nuestro slider, permitiendo una navegaci\u00f3n autom\u00e1tica a trav\u00e9s de las im\u00e1genes.<\/p>\n
          Conclusiones y Pasos Siguientes<\/h2>\n
          \"\"<\/a><\/p>\n
          Hemos navegado juntos a trav\u00e9s del fascinante proceso de crear un slider din\u00e1mico desde cero<\/strong>. Con los cimientos de HTML, el toque est\u00e9tico de CSS y la interactividad que JavaScript nos brinda, ahora tienes en tus manos una slider funcional y atractivo. Las posibilidades, como ver\u00e1s, son extensas y el camino recorrido nos ha dotado de las herramientas esenciales para explorarlas.<\/p>\n
          Ahora, el lienzo est\u00e1 listo para que le des tu toque personal. \u00bfPor qu\u00e9 no experimentar con diferentes estilos, animaciones o incluso integrar alguna biblioteca de JavaScript para a\u00f1adir funcionalidades avanzadas? En este enlace puedes ver el c\u00f3digo entero con algunas mejoras: c\u00f3digo de un slider din\u00e1mico<\/a>.<\/p>\n
          \u00a1As\u00ed que adelante, sigue construyendo, experimentando y aprendiendo!<\/p>\n","protected":false},"excerpt":{"rendered":"
          En el dise\u00f1o web, un slider din\u00e1mico\u00a0es una herramienta esencial para presentar visualmente contenido de manera organizada y atractiva. Esta funcionalidad mejora la interactividad, permitiendo a los visitantes explorar m\u00faltiples im\u00e1genes o piezas de contenido de una manera intuitiva. En este tutorial, te guiar\u00e9 a…<\/p>\n","protected":false},"author":33,"featured_media":14799,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-14787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nCrear un Slider Din\u00e1mico con HTML, CSS y JavaScript<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-27T10:18:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-03T19:04:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"C\u00f3mo Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript\",\"datePublished\":\"2023-10-27T10:18:41+00:00\",\"dateModified\":\"2023-11-03T19:04:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\"},\"wordCount\":1068,\"commentCount\":8,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\",\"name\":\"Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg\",\"datePublished\":\"2023-10-27T10:18:41+00:00\",\"dateModified\":\"2023-11-03T19:04:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg\",\"width\":1792,\"height\":1024,\"caption\":\"pantalla de ordenador con herramientas de dise\u00f1o\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript","description":"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!","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:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript","og_description":"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!","og_url":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/","og_site_name":"Blog Escola Espai","article_published_time":"2023-10-27T10:18:41+00:00","article_modified_time":"2023-11-03T19:04:40+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","type":"image\/jpeg"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"C\u00f3mo Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript","datePublished":"2023-10-27T10:18:41+00:00","dateModified":"2023-11-03T19:04:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/"},"wordCount":1068,"commentCount":8,"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/","url":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/","name":"Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","datePublished":"2023-10-27T10:18:41+00:00","dateModified":"2023-11-03T19:04:40+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"Descubre c\u00f3mo crear slider din\u00e1mico con HTML, CSS y JavaScript. Sigue el tutorial paso a paso y lleva tu web al siguiente nivel ahora!","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","width":1792,"height":1024,"caption":"pantalla de ordenador con herramientas de dise\u00f1o"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2023\/10\/crear-slider-dinamico-html-css-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Crear un Slider Din\u00e1mico con HTML, CSS y JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/10\/crear-galeria-imagenes-html-css-js.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=14787"}],"version-history":[{"count":16,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14787\/revisions"}],"predecessor-version":[{"id":14813,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14787\/revisions\/14813"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/14799"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=14787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=14787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=14787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}