{"id":28773,"date":"2024-04-01T14:23:03","date_gmt":"2024-04-01T13:23:03","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/como-crear-un-carrusel-de-imagenes-con-javascript-guia-completa\/"},"modified":"2024-06-03T17:42:25","modified_gmt":"2024-06-03T16:42:25","slug":"como-crear-un-carrusel-de-imagenes-con-javascript-guia-completa","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/","title":{"rendered":"How to Create an Image Carousel with JavaScript: Complete Guide"},"content":{"rendered":"<p>Creating a dynamic and responsive image carousel can be a great addition to any website. Not only are carousels visually appealing, they also offer an efficient way to compactly present important information, such as featured products, portfolio of work, or even customer testimonials. In this guide, you will learn how to implement an image carousel using JavaScript, step by step and in a practical way.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Comprende_los_Fundamentos\" >Understand the Fundamentals<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#%C2%BFPor_Que_Usar_un_Carrusel_de_Imagenes\" >Why Use an Image Carousel?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Empezando_con_HTML\" >Getting started with HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Estilizando_con_CSS\" >Styling with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Agregando_Funcionalidades_con_JavaScript\" >Adding Features with JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Optimizacion_y_Consideraciones_Finales\" >Optimization and Final Considerations<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Responsividad\" >Responsiveness<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Accesibilidad\" >Accessibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-carousel-with-javascript-complete-guide\/#Pruebas\" >Evidence<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comprende_los_Fundamentos\"><\/span>Understand the Fundamentals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we dive into the code, it&#039;s vital to understand what an image carousel is and why it could be beneficial for your website. An image carousel, also known as a slider or slideshow, is a collection of images that automatically rotates or slides across multiple slides, allowing the user to view multiple contents in a limited space.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPor_Que_Usar_un_Carrusel_de_Imagenes\"><\/span>Why Use an Image Carousel?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Space Efficiency<\/strong>: Concentrates a large amount of visual information in a compact block.<\/li>\n<li><strong>Improve Interaction<\/strong>: Entices users to interact with content by allowing them to navigate through images.<\/li>\n<li><strong>Attractive Aesthetics<\/strong>: Elevate the design of your website, making it more modern and visually attractive.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Empezando_con_HTML\"><\/span>Getting started with HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, you need to structure your carousel with HTML. This will be the skeleton on which you will apply styles and functionalities. Here&#039;s a basic example of what it might look like:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;div id=&quot;imageCarousel&quot; class=&quot;carousel&quot;&gt;\n  &lt;div class=&quot;carousel-images&quot;&gt;\n    &lt;img src=&quot;image1.jpg&quot; alt=&quot;Image 1&quot;&gt;\n    &lt;img src=&quot;image2.jpg&quot; alt=&quot;Image 2&quot;&gt;\n    &lt;img src=&quot;image3.jpg&quot; alt=&quot;Image 3&quot;&gt;\n  &lt;\/div&gt;\n  &lt;a href=&quot;#&quot; class=&quot;carousel-prev&quot;&gt;&amp;#10094;&lt;\/a&gt;\n  &lt;a href=&quot;#&quot; class=&quot;carousel-next&quot;&gt;&amp;#10095;&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Estilizando_con_CSS\"><\/span>Styling with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>After structuring the HTML, the next step is to make your carousel look good. This is done with CSS. Here&#039;s how you can get started:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.carousel { position: relative; width: 100%; max-width: 600px; margin: self; overflow: hidden; } .carousel-images img { width: 100%; display: none; } .carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); padding: 16px; colour: white; background: rgba(0,0,0,0.5); cursor: pointer; } .carousel-prev { left: 0; } .carousel-next { right: 0; }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Agregando_Funcionalidades_con_JavaScript\"><\/span>Adding Features with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the carousel now styled, it&#039;s time to bring it to life with JavaScript. You&#039;ll want images to scroll automatically and users to be able to interact with the navigation arrows:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&#039;DOMContentLoaded&#039;, function() { let currentIndex = 0; const images = document.querySelectorAll(&#039;.carousel-images img&#039;); const totalImages = images.length; function showImage(index) { images. forEach(img =&gt; img.style.display = &#039;none&#039;); images[index].style.display = &#039;block&#039;; } function nextImage() { currentIndex = (currentIndex + 1) % totalImages; ); } function prevImage() { currentIndex = (currentIndex - 1 + totalImages) % totalImages; showImage(currentIndex); .querySelector(&#039;.carousel-prev&#039;).addEventListener(&#039;click&#039;, prevImage); showImage(0);<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Optimizacion_y_Consideraciones_Finales\"><\/span>Optimization and Final Considerations<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Responsividad\"><\/span>Responsiveness<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Make sure your carousel looks good on devices of different sizes. You can use media queries in CSS to adjust the layout based on the device size.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Accesibilidad\"><\/span>Accessibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Improve accessibility by ensuring that interactive elements are easy to navigate using just the keyboard, and that each image has relevant alt text.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Pruebas\"><\/span>Evidence<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It&#039;s crucial to test your carousel on multiple browsers and devices to ensure it behaves consistently, making adjustments as necessary.<\/p>\n<p>With these instructions and a little practice, you will have a functional and aesthetic image carousel on your website, which not only improves the interface, but also the user experience. If you need help or have questions about implementing your carousel, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/\">my blog<\/a> or contact me <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">here<\/a>. Happy coding!<\/p>","protected":false},"excerpt":{"rendered":"<p>Crear un carrusel de im\u00e1genes din\u00e1mico y responsivo puede ser un gran aporte para cualquier sitio web. Los carruseles no solo son atractivos visualmente, sino que tambi\u00e9n ofrecen una manera eficiente de presentar informaci\u00f3n importante de forma compacta, como productos destacados, portafolio de trabajos o incluso testimonios de clientes. En esta gu\u00eda, aprender\u00e1s c\u00f3mo implementar [&hellip;]<\/p>","protected":false},"author":1,"featured_media":28774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[38,205,1938,500,90,340,2205,358,284,185,1008],"class_list":["post-28773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-como","tag-blog","tag-carrusel","tag-completa","tag-con","tag-crear","tag-frontend","tag-guia","tag-imagenes","tag-javascript","tag-pruebas"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28773"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28774"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}