How To Create An Image Slider In HTML, CSS & Javascript

[Music] hello everybody how are you guys doing today okay so we're gonna build a simple vanilla JavaScript carousel with a slider and this one is it's familiar similar to the bootstrap one so the way this is is basically we have this image here with the road and we can go through it nicely like this and once we get to the last picture it's gonna go back to the original one so it's gonna transition like this infinitely so we can click it as many times and it's just gonna loop over all the images we can also do it in Reverse so everything works all nice and beautifully so hey if you don't want to use bootstrap or you find yourself using bootstrap just to get a carousel going I'm gonna show you a way to do it all in vanilla JavaScript so I hope it helps in any way okay let's start I have here a empty empty HTML empty CSS and app.js file here I got five images here off pixels so just get five images yeah you can get them anywhere if you want it would be nice if you get the same size to all of them it's just gonna make your life a bit easier ok let's start and let's not waste any more time here we go so we're gonna build up the we're gonna say carousel container so we're going to create a div called carousel container and in this tip we're gonna create another div called carousel slide so this is where the actual images go so we're gonna say image and we're gonna slide the first one and I'm just gonna duplicate this one so we don't waste so much time we're gonna save to here three four five and this one is actually shaded banking like this good let's see what we have open alright we have five images awesome for now let's just leave it like this outside here I'm gonna add two buttons we're gonna change this later on we're gonna actually add them inside the carousel but for now we're just gonna add them down so button previous and we're gonna do next here we're gonna add them an ID breve button ID next button simple straightforward hopefully good okay we can start working on the CSS so go into your CSS I'm gonna add some default styling here so we're just gonna add some padding margin box-sizing whatever okay so we're gonna select the carousel slide the carousel container my apologies like this so this is the outside container the big one and we're just gonna add a with 60% here and a margin auto so we Center it just to keep it nice and center you can mess around with this make it smaller bigger however you want but for now this looks good good now this is where the magic happens we're gonna say carousel slide so we're gonna slug the inner div here and we're gonna just say display flex here and boom we got all the images one next to each other and now we're gonna add a width 100 to this and we're gonna also add let's add a default height here of 500 pixels now this doesn't look good now but when we add a overflow:hidden to our container everything looks nice all of a sudden all the images are hidden because we set the width to a hundredth here on the inner div so yeah everything just works it's awesome we're not gonna style these for now because these are just prototypes for now and yeah I think that's it for the our CSS now I'm actually gonna remove this overflow:hidden so we see what's going on I'm actually gonna add a border a 5 pixel solid black so we see where our actual carousel is okay awesome good let's continue so I think we can start working on our JavaScript now actually before we do that for us to get this move nice turn infinite loop we need to copy make a clone out of the first image and the last image and we can do this in JavaScript but it's gonna take too much time and we're just gonna over complicate everything for no reason so we're just gonna make it in our HTML so go back to your HTML and add a image and we're gonna select the last one here so for our first image it's gonna be the last image again and we're gonna add an ID to this called last clone and we're gonna do the same for our last image we're gonna say image we're gonna psych the first one wow this is confusing maybe first cologne alright so we have 1 2 3 4 5 then we have the first clone and last clone here so this is how it looks all right this first image second 3 4 5 and then it clones the first one again and we have the last one here again so we ideally want to start on this one but if we click on the previous button it's gonna smoothly go to this one hoping that hope that's clear good ok so I promise that should be it for HTML now we can start working on our JavaScript okay so we are gonna select the the carousel slide carousel slide document query selector and I believe we named this carousel fly if I'm not mistaken yes that's correct good let's go back here and we're gonna say Const carousel images this is gonna be all the images so we're gonna say document dot query selector all on this one and we're gonna select the carousel slide again and we're gonna say image okay so this gives us all the images okay let's select the buttons as well so we're gonna say Const breathe button is document query selector and I believe we call this pre button just like that yep good copy this is next next good awesome and now since we want to start we want to monitor on which picture we are on we need some sort of a counter so that's exactly what we're gonna do we're gonna say counter and I'm gonna put let here because we're gonna update this we're gonna start on the first image so I'm just gonna put one and we're I'm also gonna select the the width of the of the image so we know how much we need to slide so for that we're gonna say concise is equal to carousel image I'm just this I'm just gonna select one image here I'm gonna say client with so this is just gonna give us our original width back that's it good so since we want to start on the first image and not on this duplicate one we're gonna say carousel slide right so we select the big one and we're gonna say is that style that transform equal to translate X we're going to translate the X and we're gonna append plus parentheses and we're gonna say - size times counter so this is gonna be 1000 whatever - 1000 whatever times 1 it's gonna be now right so it's gonna move one picture forward and then we're gonna say plus and we're gonna say pixels just like that so let's see and look at that we started on our original picture and not on our duplicate one good awesome so that's a good start alright so now we can start adding our button listeners so I'm gonna name this button listeners alright let's see next button next but what am i doing next button dot add event listener and we want to listen on a click there we go we're gonna add a function here and you can do function here if you want like this but I'm gonna do es6 way and here we're gonna say carousel slide dot style dot trend and we're not gonna worry about transition for now actually yeah let's add this carousel slide dot transitions file oh my god that transition because we also want to add the transition to this as equal to transform mmm let's see zero point for ease and out you can also make a class and just add the class here and CSS if you wish to I'm just gonna add it here so we can see everything so I'm not jumping too much around on CSS and JavaScript so again you can add this as a separate class and then you just add the class and remove it but I'm gonna leave it like this for now and okay so on our next button which one is the next button so after we add the transition we also want to add one to our counter so we're gonna say counter plus plus so this is just adds one so it's gonna be two now if we click so if we see a console.log counter then we are gonna see this happening here click click click click there we go increments perfectly good and now let's remove this we're gonna say carousel fly it again dot style now transform is equal to translate X actually we're gonna do basically what we did up here so just copy this and paste it here like that now we leave this here because we originally want to start on our not on our duplicate but after that we can just do this now we have a few issues with this is if we click and we go through all these whoa okay we just leave the whole thing so that's not good okay so for the previous button we can just pretty much duplicate this and just change our things here previous and here we want counter - - and yeah I think that should do the trick let's see yep works nicely again we still have this problem here that we can just leave the container which is not ideal okay awesome there's one more thing we want to do so for not leaving the container we can just say for now you can go up here so up before all of this and we can just do an if statement so we're gonna say if counter is smaller or equal than zero then we can just return so this is basically you're not gonna do anything good actually we're gonna add this later on because I want to explain something here good now the problem is is how do we loop back to our original picture well for that we're gonna use something called transition end it's basically an event listener that's going to trigger after a transition finishes so after our transform finishes here we that listener basically fires off so to demonstrate that we can see carousel slide so we're gonna select the carousel flight here we're gonna say dot add event listener and we're gonna say transition and and we're gonna do a function here good and to demonstrate I'm just gonna say console.log fired relatable okay let's see next so the basically fires every time the animation stops there we go so we want that basically so we can reset the transition here so what we're gonna do is reset the transition and if our image is the cloned one we're basically on a reset D transition and we're gonna jump back to our original picture so I know that sounds confusing but we're gonna see it visually it's gonna be quite nice so we're gonna say if and we're gonna say carousel images so we're gonna select all the images here and to select the specific image that we are on we're gonna say counter because we have this counter that keeps track of everything and if the ID here is equal to last clone okay we have that clone picture here this one so if the ID equals to the last clone then we want the Carousel slide style that transition so basically we're gonna take this transition you know what it's just to this there we go and we're gonna sing none here good and the reason we want to take off the transition here is so we can translate it back to our original picture so if we go to this one right we remove the transition and jump all the way to this one without the transition effect so here if we say counter equals two let's see which one is that last clone we say carousel images so we select all the images doll lengths so we get the length and we're gonna say minus two because we have the duplicate right we have the duplicate and this one so we're gonna see carousel images doll length minus 2 so we update the counter here and then we're gonna just copy this again now let's see what we have so far BAM and look at that we jumped all the way here there we go it's gonna jump again so I'm gonna jump again now if we remove this transition we're gonna have this ugly effect so this is why we added see this is basically what's happening but we just removed the transition so it doesn't look like that okay awesome and now we just need to do it now we're gonna fix that bug too so don't worry there we go and now we need to do this with the other one too so I'm just gonna copy this again remove this console.log we don't need it good good add this back okay so for the second one we're just gonna duplicate this one we're gonna change first clone here transition none again and for this we're just gonna say counter equals carousel images dot linked again and we're gonna say - counter just like that this stays the same and then we should have this effect hopefully didn't take so long so we can go like this and if we go the other way too it's also gonna again we still have this bug well let's see BAM okay great so we jump back again we're not loading everything here again we're just jumping the position good so now we can finally set overflow:hidden so it doesn't look disgusting go back to carousel container over overflow:hidden and it looks nicer now and there we go we have the effect now there's a bug if we click the next button really fast we're gonna go all the way to this now the reason that happens is because we update everything all right so the counter is going off right like it's going off like crazy but this only jumps after the transition ends right so we don't give it time if we click superfast for this to hat take place right so this doesn't even work only just because we click superfast so to fix that we just go back and we are gonna do what we did originally but I wanted to show it first before I added this we're gonna say if counter basically is smaller or equal to zero returned we're not gonna be doing anything so if we check now click like like super fast actually I need to go the other way I think it's the correct no it's that that's not correct okay again let's let's trying to debug this that's what we do most of the time right nothing's perfect okay next button okay I made a mistake so this needs to go to previous button not on next right because on the previous we say counter - - so it's gets smaller right here so let's try again go go go go go so it doesn't it doesn't break anymore okay so I know I can why is the counter not working why is it not returning oh because we're incrementing here oh okay good here we're gonna do the opposite we're gonna say if counter is bigger or equal to carousel images dot length and again we're gonna say -1 here and we're gonna say we turn again good let's see click lick lick lick lick so this works this one click lick lick lick lick lick lick all right we don't have that issue anymore so we can and we're it's awesome good again now you can feel free to also play with the speed of this I mean probably not there I'll keep it like this for now but you can experiment good we have everything and it's working I know it might taking a bit too long because I wanted to explain it a bit so let's let's fix fix these buttons so for fixing the buttons i i'm just i used boots and a bootstrap font font awesome here but you can keep the buttons you can also make your own SVG i'm just gonna add this now for so we can finish this fast so just add the font awesome here and now we need the actual icon so I'm gonna say font awesome actually just gonna add them cuz I already made this so if we're gonna say icons you're gonna find the arrows here so if you search for the arrows arrow and there's one there's one so all you have to do is click here and copy here and what I'm gonna do is basically copy both of those and we're gonna add them inside here the container so I already have them here so we don't waste time and just add the previous and Next button ID make sure you don't forget about those just like that good awesome now in our CSS so we make things a bit nicer we need to do two things here so I added some basic style here I'm gonna say previous button we're gonna say position:absolute on this we're gonna say top 50 z-index 10 so this goes on top so we can see it you can say left 5% for this font size I'm gonna do 30 pixels so it's nice and big color white opacity 0.5 so it's a bit faded and cursor:pointer now we're gonna now gonna see it it's up here because we need to add position relative to our container and boom now boom bad boom carousel container okay carousel slide where did we add these alright we added them to the right position okay what is wrong with you position previous its previous there we go preview button is a preview button there we go maybe we can also increase the opacity on this 0.7 maybe yeah maybe more see let's just remove this yeah there we go and let's just copy this and add the next and we're gonna say right here not left right and there we go that should do the trick hopefully you guys enjoy this tutorial if you have any questions make sure to leave it down in the comments below sorry if it took too long but yeah that's how you build a simple carousel if you want a challenge you can also start you can work on adding those little bubble buttons so that's a challenge that I'm gonna give you guys if you want to finish in the next video I might add in the comments on how I would do it but yeah hope you enjoyed this video if you want more make sure to leave a comment and I'm rambling too much all right take care bye

Channel: Dev Ed

Views: 354,234

Keywords: image carousel javascript, how to create an image carousel, html, css, javascript, how to web development, bootstrap alternative, vanilla javascript, How To Create An Image Carousel In HTML, CSS & Javascript, dev ed, image slider tutorial, javascript image slider, jquery image slider

Id: KcdBOoK3Pfw

Length: 24min 42sec (1482 seconds)

Published: Sat Jun 30 2018

Reddit Comments

[u/DrDuPont]

Some notes:

All this code is in the global namespace, might want to wrap this all into a function/class so there aren't conflicts.

I'd probably put the transition into CSS, and disable it by adding a class. Separation of concerns and all that. E.g.

const disableTransition = elem => {
  elem.classList.add('notransition');
}

const enableTransition = elem => {
  elem.classList.remove('notransition');
}

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; gets repeated a lot, could probably be abstracted. E.g.

const animateSlide = (elem, size, distance) => {
  elem.style.transform = `translateX(${-size * distance}px)`;
}

Since you're using querySelector() for the carouselSlide and button variables, a user wouldn't be able to have multiple instances of carousels in the page. Swapping those and then wrapping the code in a foreach would be pretty sweet.

If a carousel isn't present on the page, you'll get an error Cannot read property 'clientWidth' of undefined. Should probably return early if carouselSlide doesn't exist.

[u/storyofedd]

Someone requested a responsive navbar, feel free to request other tutorials aswell. Support should be good on this, all the way down to IE 10.

[u/ba_prg]

Nice job. Thanks for making this.

[u/WeRequireCoffee]

To those of you wondering, you can download the vanilla js framework here. Its actually surprisingly lightweight.

[u/DrDuPont]

Would be great if you threw the finished product up on a JSFiddle!

[u/levorto]

Nice tutorial! You should do an extension on this, creating the alternative infinite carousel.

E.g. Navigate right === take first item in array and throw it to the back of the array, navigate left take last item and insert in beginning of the array.

Third installment could touch on FLIP (first, last, invert, play () => { https://css-tricks.com/animating-layouts-with-the-flip-technique/ } );