{"id":5224,"date":"2021-06-08T02:00:00","date_gmt":"2021-06-08T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/javascript-slider-how-to-make-one\/"},"modified":"2025-06-10T10:34:24","modified_gmt":"2025-06-10T08:34:24","slug":"javascript-slider-how-to-make-one","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/javascript-slider-how-to-make-one\/","title":{"rendered":"JavaScript Image Slider [ How To Build One ]"},"content":{"rendered":"\n

How can you make a JavaScript image slider from the scratch? How do JavaScript image slideshows really work?<\/strong> Do we really need JavaScript for carousels nowadays? CSS has come a long way, and it’s actually possible to make a pretty decent slider with pure CSS<\/a>.<\/p>\n\n\n\n

However, you’re still very limited in what you can do with CSS alone, so if you want something more complex, you’ll need to build your image slider using JavaScript.<\/p>\n\n\n\n

But then your next question becomes, how to build one? Well fear not my friend, because by the end of this post you’ll know how to build an image slider in JavaScript -source code provided!-, including navigation buttons and breadcrumbs.<\/strong><\/p>\n\n\n\n

Let’s do it!<\/p>\n\n\n\n

Create the Structure for The Image Slider with HTML<\/h2>\n\n\n\n

First, we’ll have to create the basic structure for the image slider. The html for our image slider will look like this:<\/p>\n\n\n

<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"slider\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"slider__slides\"<\/span>><\/span>\n      <div<\/span> class<\/span>=\"slider__slide active\"<\/span>><\/span><\/div<\/span>><\/span>\n      <div<\/span> class<\/span>=\"slider__slide\"<\/span>><\/span><\/div<\/span>><\/span>\n      <div<\/span> class<\/span>=\"slider__slide\"<\/span>><\/span><\/div<\/span>><\/span>\n      <div<\/span> class<\/span>=\"slider__slide\"<\/span>><\/span><\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
So, container<\/code> is just the element that contains the future JavaScript images slideshow. This can be absolutely any part of your site, but I’ve just gone for a simple flexbox:<\/p>\n\n\n
.container<\/span> {\n    display<\/span>: flex;\n    align-items<\/span>: center;\n    justify-content<\/span>: center;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Next is the main slider<\/code> element. This will hold the image slides and the navigation elements:<\/p>\n\n\n
.slider<\/span> {\n    display<\/span>: block;\n    position<\/span>: relative;\n    width<\/span>: 100%<\/span>;\n    max-width<\/span>: 900px<\/span>;\n    margin<\/span>: 10px<\/span>;\n    background-color<\/span>: white;\n    overflow<\/span>: hidden;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
You can adjust the size in any way that floats your boat – just make sure there’s a position<\/code> property applied to it.<\/p>\n\n\n\n
We also have a container div<\/code> for the slides, slider__slides<\/code> and four slider__slide<\/code> elements, which I’ve styled like this:<\/p>\n\n\n
\n.slider__slides<\/span> {\n  width<\/span>: 100%<\/span>;\n  padding-top<\/span>: 66%<\/span>;\n}\n\n.slider__slide<\/span> {\n    display<\/span>: flex;\n    align-items<\/span>: center;\n    justify-content<\/span>: center;\n    font-size<\/span>: 50px<\/span>;\n    font-weight<\/span>: bold;   \n    position<\/span>: absolute;\n    top<\/span>: 0<\/span>;\n    left<\/span>: 0<\/span>;\n    width<\/span>: 100%<\/span>;\n    height<\/span>: 100%<\/span>;\n    background-color<\/span>: lemonchiffon;\n    transition<\/span>: 1s<\/span>;\n    opacity<\/span>: 0<\/span>;\n}\n\n.slider__slide<\/span>.active<\/span> {\n    opacity<\/span>: 1<\/span>;\n}\n\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now, here’s where it gets a little interesting. Setting padding-top<\/code> to a percentage in slider__slides<\/code> will maintain its aspect ratio.<\/p>\n\n\n\n
The the slides themselves are positioned absolutely, top<\/code> and left<\/code> are both 0<\/code>, while width<\/code> and height<\/code> are both 100%<\/code>.<\/p>\n\n\n\n
This means that each slide will completely fill the first parent element that has a position<\/code> property applied to it (that’s why I said make sure you do that to the slider<\/code> element).<\/p>\n\n\n\n
This also<\/em> means that the four slides are stacked directly on top of each other. Notice that I’ve set the opacity<\/code> of each slide to 0<\/code> – this makes them transparent. But the .slider__slide.active<\/code> part means that any element which has both<\/em> the slider__slide<\/code> and active<\/code> classes will have an opacity of 1<\/code> – making the active slide visible.<\/p>\n\n\n\n
Here’s what that gives us:<\/p>\n\n\n\n