{"id":28759,"date":"2024-04-20T06:48:30","date_gmt":"2024-04-20T05:48:30","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/como-crear-un-slider-de-imagenes-con-vanilla-javascript\/"},"modified":"2024-06-03T17:42:19","modified_gmt":"2024-06-03T16:42:19","slug":"como-crear-un-slider-de-imagenes-con-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-slider-with-vanilla-javascript\/","title":{"rendered":"How to Create an Image Slider with Vanilla JavaScript"},"content":{"rendered":"<p>Creating an image slider may seem complex, but with pure JavaScript (also known as Vanilla JavaScript) it is a totally doable and, above all, fun project. This step-by-step guide will show you how to build a dynamic image slider from scratch. Ideal for portfolios, photo galleries or simply to give an interactive touch to your website.<\/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-slider-with-vanilla-javascript\/#Empezando_con_lo_basico_%C2%BFQue_es_un_slider_de_imagenes\" >Starting with the basics: What is an image slider?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-slider-with-vanilla-javascript\/#Configurando_el_entorno_de_trabajo\" >Setting up the work environment<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-slider-with-vanilla-javascript\/#Paso_1_Estructura_HTML\" >Step 1: HTML Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-slider-with-vanilla-javascript\/#Paso_2_Agregando_estilos_con_CSS\" >Step 2: Adding styles with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/how-to-create-an-image-slider-with-vanilla-javascript\/#Paso_3_JavaScript_para_la_interactividad\" >Step 3: JavaScript for interactivity<\/a><\/li><\/ul><\/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-slider-with-vanilla-javascript\/#Consejos_adicionales_y_mejoras\" >Additional Tips and Improvements<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Empezando_con_lo_basico_%C2%BFQue_es_un_slider_de_imagenes\"><\/span>Starting with the basics: What is an image slider?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>An image slider is a compilation of graphic elements (images in this case) arranged consecutively and that the user can navigate back and forth. They are often used to highlight important content on web pages, such as cover carousels, product galleries in online stores or photo galleries on blogs.<\/p>\n<p>Before we dive into the code, you&#039;ll need some images to work with. You can use your own photographs or search for royalty-free images on sites like Unsplash or Pexels. Make sure you have the rights to use these images or that they are free to use.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Configurando_el_entorno_de_trabajo\"><\/span>Setting up the work environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To get started, you need to create an HTML file, a CSS file to style your slider, and a JavaScript file. Here is a basic structure of how to organize these files:<\/p>\n<pre><code>\/slider-project \/index.html \/styles.css \/script.js<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_1_Estructura_HTML\"><\/span>Step 1: HTML Structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Inside your file <code>index.html<\/code>, establish the basic structure of the HTML and link your corresponding style sheets and scripts:<\/p>\n<pre><code class=\"&quot;language-html&quot;\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&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;Image Slider&lt;\/title&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;slider-container&quot;&gt;\n        &lt;div class=&quot;slider&quot;&gt;\n            &lt;!-- Las im&aacute;genes ir&aacute;n aqu&iacute; --&gt;\n        &lt;\/div&gt;\n        &lt;button class=&quot;prev&quot;&gt;&amp;#10094;&lt;\/button&gt;\n        &lt;button class=&quot;next&quot;&gt;&amp;#10095;&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;script src=&quot;script.js&quot;&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_2_Agregando_estilos_con_CSS\"><\/span>Step 2: Adding styles with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>in your file <code>styles.css<\/code>, add the basic styles for your slider. Here&#039;s a simple example to get you started:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">.slider-container { position: relative; width: 90%; max-width: 1000px; margin: self; overflow: hidden; } .slider { display: flex; width: 100%; transition: transform 0.5s ease-in-out; } .slider img { width: 100%; display: block; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background-color: #ddd; border:none; padding: 10px; cursor: pointer; } .prev { left: 10px; } .next { right: 10px; }<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Paso_3_JavaScript_para_la_interactividad\"><\/span>Step 3: JavaScript for interactivity<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now the file <code>script.js<\/code> It&#039;s where the magic happens. First, you need to load your images dynamically and add the functionality to move images back and forth. Here is an example of how you could do it:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">window.addEventListener(&#039;load&#039;, function() { const slider = document.querySelector(&#039;.slider&#039;); const images = [&quot;url1.jpg&quot;, &quot;url2.jpg&quot;, &quot;url3.jpg&quot;]; \/\/ Load images images.forEach(image =&gt; { const imgElement = document.createElement(&#039;img&#039;); imgElement.src = image; slider.appendChild(imgElement); }); update slider function updateSlider(index) { const offset = -index * 100; slider.style.transform = `translateX(${offset}%)`; } \/\/ Control buttons document.querySelector(&#039;.prev&#039;) .addEventListener(&#039;click&#039;, () =&gt; { if (currentIndex &gt; 0) { currentIndex--; updateSlider(currentIndex); } }); 39; , () =&gt; { if (currentIndex &lt; images.length - 1) { currentIndex++; currentIndex);<\/code><\/pre>\n<p>This basic code will allow you to have a functional slider. You can expand it by adding automatic timers, more complex transitions, or even touch controls for mobile devices.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Consejos_adicionales_y_mejoras\"><\/span>Additional Tips and Improvements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the basic structure in place, there are many ways to improve your slider:<\/p>\n<ol>\n<li><strong>Image optimization<\/strong>\u2013 Make sure your images are optimized for web to improve loading times.<\/li>\n<li><strong>Responsiveness<\/strong>\u2013 Adjust CSS to ensure your slider looks good on all devices.<\/li>\n<li><strong>Automation<\/strong>: Adds an interval for the slider to change automatically every few seconds.<\/li>\n<li><strong>Position indicators<\/strong>- Implements small circles or bars that indicate the currently visible image.<\/li>\n<\/ol>\n<p>As you become more familiar with JavaScript and CSS, you will be able to add more sophisticated and customized functionality, adjusting the slider to perfectly fit the needs of your project or web design.<\/p>\n<p>For questions or if you want to delve deeper into a specific topic, do not hesitate to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>. I&#039;m here to help!<\/p>\n<p>I hope this tutorial has been useful for you to get started with your own image slider in JavaScript. Until next time!<\/p>","protected":false},"excerpt":{"rendered":"<p>Creating an image slider may seem complex, but with pure JavaScript (aka Vanilla JavaScript) it is a totally doable and, above all, fun project. This step-by-step guide will show you how to build a dynamic image slider from scratch. Ideal for portfolios, photo galleries or just to give an interactive touch to your website.<\/p>","protected":false},"author":1,"featured_media":28760,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1901],"tags":[38,205,90,340,284,185,627,1008,1932,1422],"class_list":["post-28759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-proyecto","tag-como","tag-blog","tag-con","tag-crear","tag-imagenes","tag-javascript","tag-proyecto","tag-pruebas","tag-slider","tag-vanilla"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28759","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=28759"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28760"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}