How to code a carousel with HTML, CSS and JavaScript - from scratch (part 2)

Key Takeaways

hello and I'm assuming welcome back yeah you might be jumping straight into this video but and skip the previous one but in this one we're taking what I've already styled here I've already done the HTML have already done the CSS and we're gonna be making it functional with JavaScript hi and welcome if you're new here this is my sort of second slash first 1.5 video of 2019 if you're new to my channel and I'm really excited about this one because I don't do a lot of JavaScript here on my channel it's mostly HTML and CSS but I do want to be doing a bit more JavaScript and this one's just a lot of fun to do and there's a lot of different elements and a lot of different things we're going to be doing for this one so if you haven't already seen the last video I'd strongly recommend you do check it out because what I did here with the HTML and CSS does impact the overall way I'm approaching the JavaScript and some of the things I'm doing in there but if you just want to watch this one I think you can still learn a lot from it before I really jump into it I just want to say a lot of this course or this video wouldn't exist if it wasn't for this course learn JavaScript by széll this is unsolicited promotion I'm a student I'm not getting anything from it I just think it's worth mentioning because I was a student for it and I wouldn't be able to write this JavaScript if I hadn't done this course and actually Zell was kind enough to let me pretty much take what was in this course as one of the components and make it into a video I talked about it a little bit more at the beginning the last video I'm talking but a little bit more at the end of this video but for now that's it I just want to say a big thank you to Zell for letting me put this together and just to thank you for the course because his course just completely changed how I approached to have a script and how comfortable I am with JavaScript so hopefully this video helps you become more comfortable to have a script and understand a little bit more about JavaScript we're gonna be doing a lot of fun stuff in here so let's jump right into the code and start doing some cool things I think that's it for there so now we get into the fun parts of actually doing some JavaScript so let's go and do that I'm going to come back into my main folder here at whoops not a new file make a new folder called jeaious and inside of that J's folder we can make a carousel J's file we'll go back to my index for a second all the way down at the bottom right before the closing of the body we can add in a script tag and my script tag will have a source of carousel J s slash carousel is so now we're linking over to that so if you're new to JavaScript and you're not even sure if you're linked over properly what I'm going to encourage you to do is do a nice little inspect element and jump over to your console now I'm in Firefox developer edition so it's dark years might look white but it's no big deal it's the same in chrome it's the same in Firefox you want to go to your console and you should see a little thing like this and over here in our JS file we can do a little console log and inside of some parentheses we can write in test and we can reload our page and you should see tests appear there so if that works you know your JS file is linked it's even telling us it's coming from carousel jeaious line one and on the first character in there so we can delete that because we know we're linked we're know we're good to go and we can start writing some JavaScript except when you're sitting there looking at a blank javascript file going oh my goodness I have a whole bunch of stuff to do it is overwhelming and this is where the Szell's course is what made me rethink how I do JavaScript and break it down into manageable pieces and just experiment and make things work so it's not always about doing things the right way it's about making them work and then improving them so they work so with this I will be doing a little bit eerie fracturing as we go but I'm gonna more or less be aiming to the the end result but don't you know if you're watching this and you're going how does he know all of this if you haven't done a lot of JavaScript some of this stuff might be overwhelming it you might be going what is he doing it's fine don't worry about it there's lots of simple things in this and there's lots of more complicated things in this and I'm gonna do my very best to explain all of them but doing a proper course on it really can help because javascript is massive compared to HTML and even CSS it's a completely different wheelhouse but the main thing I'm gonna say is build stuff just keep building stuff okay and this when you're building a carousel which is awesome but you're gonna get through this and not remember a from it so then after that you can take it further steps but you're not here to hear me say all this you're here to hear me tell you how to make one so let's go and do that I'm gonna be using Const instead of something you might be used to seeing VAR in es6 they added the constant so instead of well it's a variable but it's a constant variable so it's Const but it works exactly the same way so I'm gonna start with my track and I'm gonna do a document query selector and my query selector is going to be for my I think I called it carousel track so what this is doing if you might also know query selector already and you're going whoa I could be using element by class name I'll be sticking with query selectors and so a query selector is going to look in your file so it's looking in my entire document and it's searching for dot-com carousel track and the first one it finds will become my constant track so I'm saving that as I need to define all the different things here pretty much that I need to get so I know I need my track but what other things do we need I'm gonna put a few comments here so we want when I click when I click left move slides to the left when I click right move slides to the right what's another thing we can do when I click the nav indicators move to the slide move to that slide I think makes sense so I need my whole thing definitely needs to be defined here because we need we need the whole thing to move then we need to move my individual slides I need to keep track of my individual slides so we can go and get those so I want to define my slides so I want I can you could we could get each slide as its own variable here or we could store all of them in a single variable with an array so we can do an array from and then I can go to my track so I'm going to the carousel track itself and we're going to get the children too from there so to show you what that is we'll do our console log and if you're not sure and you're new to JavaScript do lots of console logs as let's do one for the track itself first I should have done this already just to show you how this is all working and how we can even know about this sort of track dot children thing so I'm looking at my track itself and you can see that it's found my UL that I called carousel track and if I click this little thing here we get all the information that it's got on that and there's lots and lots of information and it can be overwhelming but this is what you can learn used to learn how to manipulate the Dom or access not not manipulate but to access the different parts of the Dom so here if I go down you can see that it has child element count three so it knows it has three children then if I come down a little more I can actually find the children and I can see them here listed so it has the three children and I can see that there's the three slides that are in there so track dot children will get this exactly what we see here so it's making an array so it's grouping all three of them together and it's going to if I do slides here we'll see that when I save and we're getting our console.log it's an array and in my array it saved all three items so it's an array is sort of grouping all three of them together so I have all three of those there obviously if I have to click left click right so I need to define my left and right buttons so Const we'll call it next button will be something and we'll also whoops and I'll have a Const the previous button I'll just put previz it's faster to write and that we need to do something to to get to those so for these we can just use our query selectors again because they're each individual buttons so again a document dot query selector and in this case it's my carrot box dot Carrick carousel button the next button would be the root to the right so my carousel button right and actually we can just copy all of you paste it in and then this one be the left so I have my left and my right buttons there and if you're not sure if it's working you can always do another console.log just to make sure that it's getting the right thing we also need when I click my indicator so we need to get the indicators themselves so we can do our we'll call it do we call it I'm gonna call it dots and have my my dot navigation so my dots knab's not dot dot can't find my equals button there we go so we'll call it dots nav you could probably just call it nav if you wanted to your carousel nav so we'll do another document query selector and on this query selector it's my I think I could just call the carousel nav so that one's nice and simple and we're probably going to need the individual dots that are in there let's leave it like that for now and if we feel like we need to come in and get these as individual ones similar to this you know I think we're I'm pretty sure we're gonna need that so let's just call it Const that's is equal to an array from and this time it'll be dots nav children pretty sure we're gonna need to access those for not so much for the back-and-forth action but when we want to click on them individually I think that's all we're going to need for now so we have all of those defined now another thing that's really important is actually the size of this we need to have that define because it depends if my browser windows bigger this is gonna be bigger or if my browser window is smaller it's gonna be smaller so the amount we're moving when we click on these depends on the width of this track itself or how big this space here is so there's a few different ways we can do this so we do need this as another con stuff so I'm gonna come up to here we're going to call this one slide size and we're gonna get the size to start with so I'm going to do slides 0 so if you're not used to this I'm not going to go into too much detail because I'm assuming you know some JavaScript but we have our array so when array starts at 0 so I'm accessing just I want to get the size of one of my slides because all of my slides should have the same width so this is just going to get me the width are the total size LEM Lent height and width for now and then we'll get the width after of my the first slide which will be the same as all my slides and for that we can use get founding client rekt nice long one and let's do a console log so we can see what that's giving us slides sighs whoops I made a mistake somewhere along the way there there we go so here it's giving me the x and y-coordinates of it and it's giving me the width which is six hundred and thirty six point seven nine nine nine nine and if we came and were to make this a bit bigger and refresh you can see now the width has changed to 684 so it's measuring the size and it's getting us the size but it's giving us the width it's giving us the height the top the right the bottom all these properties and we only need the width of itself so we could come in here and do Const slide width and have this as slide size and just like up here we were able to do dot children we have something over here so it would apply that we can do dot whip and you'd be right if you'd think that so slide size we already know work so now we can check slide width and it's only giving us the width which is perfect and it's what we want we could make this all a lot easier though by changing this from slide size to just slide width all on its own and coming all the way over here and doing the dot width right at the end so we're just stringing it all together to make it a little bit simpler so when I save that the same number should pop up here in my console and we can see that it's working so we can now get rid of this one right here all this commented out so here's all the things and I actually missed something is right now all my slides are stacked one on top of each other but that's a bit of a problem because I need my slides not to be stacked but to be one next to each other so the first thing we should be doing is actually arrange the slides next to one another we could try and do this with CSS but I'm going to be using absolute positioning for my slides to get them to do this there are other ways you could but think we'll learn a little bit more by doing it this way like you could use some flexbox but then you're still calculating you still need to be making most of these calculations anyway so what we're gonna do is well we want to arrange the slides next to one another so this is the first real thing we're actually going to be doing now so there's a few different steps we could take to doing this so the first thing we'll do is just say it slides zero so I'm going to select my slide zero now I'm actually doing something I'm gonna go into the style of that and I'm going to apply a left of zero to it and then I can go to my slides one which is my second one set the style of that to have a left of and I'm just going to a hundred pixels for now oops we have to do 100 px like that and I'm gonna hit save and actually it's possible it did change okay I wasn't sure I'd I have position:absolute of course they're stacked on top of one another so now we can see that it is sticking out the side there and if I bring this up to 200 pixels then it's gonna go out by 200 pixels but we need this number to always be the actual size of here and we've already got that with our slide width here so I could come on here and you just slide width now I can't just leave slide with like this you'd probably try it and it's not gonna work because it's gonna be missing the pixels it's giving me a number but it's not giving me pixels so I can add inside of some quotation marks px and you can use single or double just be consistent when you're using your quotation marks so now we should have one slide and then I have my second slide right there and then we can come down and do my slides to style left is equal to slide width plus but now I want my slide with but I need it to be over double that so I can do it times two plus px so I have my first slide my second slide my third slide and that's working and that's great that it's working but first of all it's really inconsistent so it's kind of annoying for that so we could actually do slide width star zero plus y X and then this one could be x one so at least now there's a bit of consistency between them so if I save that we should get the same thing because this would be slide with x 0 so 0 + PX so at 0 px so it's the same as it was before this one's the same as it was before because we're doing x 1 x 2 but imagine next time your client comes and they add five slides you don't wanna have to come into your Java Script and manually add the five slides or if they tell you to take two out next time you don't have to come in and then have to manually edit you know your Java Script every time the client comes back with a change or you're just updating your own website so it's not very practical at all so what we could do is create a loop for this to work so I'm gonna comment this all out so we can leave it there because our loop is actually gonna do exactly what we wrote here but it's gonna do it on its own so for my loop I can do slides dot for each so what I actually want to do is for each slide and I'm gonna write index and we'll explain index in a second I want to do a function so I'm going to be using arrow functions in here and what we'll do is we'll say that slide style I have to spell things right they'll style left is equal to slide width times index + px' okay let's break this down a little bit before I hit save and hope that it works so for my slide so it's going to look at all of my slides so for each one so for each slide so it's gonna look at each one of my individual slides and the index so this is you can think of the index like the number here I have my 0 my 1 the 2 so it's gonna set the slide style left so the style left for the first slide will get the slide width with the index of 0 because it's going to start at 0 and then + pixels then it's in it so it's running through this so then it's a new slide style left slide width and times and then the number will be 1 and then it's going to run through again and do number is 2 so if I hit save nothing should change here and there we go it worked it's holding my breath a bit there is hoping that it would so everything is working so we've managed to do this but with a lot less code and a lot less manual work and the other nice thing about this is in you can add as many slides as you want and it's automatically going to run through all of them and do it every single time so you don't have to manually do it but we can keep on improving on this the problem is now if you came back to this or somebody else because you're working in a team let's say they could figure this out it's not a complicated piece of code but it's not super obvious what this is doing at the beginning so we could actually do this by setting a function with a name so if I do Const set slide position and I come up I'm gonna do so the same thing we had before we had our slide and our index and we're gonna do the function here of slide style left is equal to slide with I guess I could have copied and pasted here but we're so far and we might as well just do it so I've taken exactly what I had here and I've moved it inside of a function the event chairs were being declarative we're declaring what this function is doing right now it's an anonymous function it's running inside of my for each now it's a named function and it's really easy for us and someone else to come along and see what it's actually doing and the other thing that's nice about it now is I can just come up here and set say it set slide position and hit save and it's going to work so it's doing the exact same thing I was doing before it's doing it with one extra line of code but it makes it a lot more obvious what we're doing so we're set we're creating something a function they can set the slide position for something and then we're going take all my slides and for each one use that function and the functions name is really obvious what it's doing we're setting the slide position for each of my slides so writing it out this way can just make it a little bit easier for yourself in the long run when you're coming back to things or if other people have to work on your code or anything like that so that's done we've arranged the slides and actually let's delete this because it's sort of just good the we know that you might want to keep that just if this isn't super clear but we're arranging the slides next to one another and that's exactly what we're doing right here alright great so now we want it so when I click we're going to do the right button first just because we're already all the way on the left so let's come over to this right button so when I click on the right button I want it to move I want all the slides to move to the right so we already have our next and previous buttons here so this would be my next button we want something to happen when somebody clicks on it so to do that what we need to do is add an event listener so an event listener means listen for something and in this case we're gonna listen for a click and anytime there's a click we want to do we're going to track that click and we're going to do something so what are we going to do well we want to move the slide right that makes sense so before we can actually move this slide we have to figure out what slide we're actually on because right now we're on this one but once I've clicked it once the current slide is changed so the first thing we have to do is actually find the current slide so we need the current slide to do anything so we're gonna look at our whole track because we have an a whole track and we want to find something but actually we have to come back to our index for a second so here on my track I have my and we can collapse these down just for simplicity sake right now I have my carousel slide slide and slide and just like here I did a current slide on my button I'm gonna do a current slide on my little thing here cuz that lets us track it so my having current slide in my markup over here I can do my document a query selector and look for dot current slide and actually I did track document because I got distracted going back but it should be just be track query selector current slide I don't want to look through my whole document it'll be a lot faster to tell it only look inside the track so before I was looking through my entire document but now I can look through only that one thing and find the current slide that's in there except it's not written like that it's written like that so there we go so my current slide is whatever has it so we can find my current slide and the other thing we need is we're pushing the next button so we need to know what the current one is and we need to know what the next slide is so let's find that one as well we have our Const next slide and for this one we're actually you're just gonna do current actually to show you how I'm doing this console.log current slide not save that so when I first do that nothing's gonna appear but as soon as it because we're inside of our event listener so this is waiting for me to click on my next button so now when I come up and click that console.log is gonna run if I click again it's gonna run again and again and again so we can keep getting that to come up I'm just trash all those and then we can get and go and look inside of here and we have all of these different things again and there's lots and lots and lots of stuff in here that you can go and explore but things that are interesting is you can actually see the sibling elements so if I go down far enough because it's in alphabetical order of course n is right before o so let's go back up a little bit next sibling next element sibling so we can see here next element sibling is my next if I hover over it's highlighting it there at the top so just like we did before we can just come and do dot and next element sibling just like it's written here in my console so we can hit save on that so when I click here we see that it's popping up so let's have console logging that of course this can become my next slide is equal to and we don't need the quotation marks on there then out quotation in the parentheses so now my next slide is the current slide next element sibling so it knows my current slide and I know my next slide which is right there so now when I click I want to move to the next slide so it's not moved to slide its move to the next slide and the more specific you are if you're writing comments and stuff like that it can really help you out in trying to figure out what you want to do is just staring at a blank file is overwhelming and confusing so we need to move to the next slide well how can we do that we need to know how much we're going to be moving to so I'm going to come back up to here and say Const we'll call it amount to move and so next slide style left because the we need we want to know where this is and we want to move it over by that amount so we can get that the the next slide we get its style and its left the proper e the value of the left property and that's gonna be a number so now we can actually make it move when we click so we can console.log that to console.log amount to move just to see the number pop up so when i click here you get that's how much it's going to move by awesome so we know we want it to move by where that is but we don't want it just to appear here and if we play with the left but I'm going to do it for my whole track so I'm gonna slide like the whole thing over so for that we want my track which we already have that's defined up here we have my whole carousel track so what I want to do is let me just think for a second I want to take my track style and give it a transform property on here but the transform will be what will be my transform it's give me a translate X and we want to translate X how much we want to translate it by we want to translate it by plus amount to whoops come out do you move and then plus and we can put in our closing parentheses there so it's gonna move it over by that much track style transform I think this should work let's click and there we go something happened the whole thing went green but that's probably a good first step at least we know something is happening not sure exactly what happened there let's go and take a quick look so my track here got the style you got to transform translate X the problem is it's going positive so it's actually pushing things further away so we should add a negative in here so negative let's try that again so now when I click negative 632 and it's still these lost their height for some reason let's just do a little refresher on their inspect element carousel track let's go to my Styles here for a second I just want to check one thing really fast carousel track let's give this a position relative and whoops a height of 100 percent just there's my track my track is the full size now there we go ah it worked ok great so you can see now it's sliding over so we needed just to make sure the height was on there because it was shrinking to zero and I think the children were shrinking along with it strange but anyway so yeah there we go so now when I click it's translating over and it's pushing but the only problem with that is it's just switching I want it to transition so I can add also on here a transition sort of good that we're here on my transform we'll say 250 milliseconds ease in you can always put whatever you want for that so it's a refresh and now when I click there it's gonna slide on over awesome now the problem is it slides once and then it stops I can't keep sliding and that's because every time I click on my next button it's looking for so every time we click on my next button it's going to be looking for my current slide and it's finding the current slide by finding whatever has current slide on it and even though it's moved over this first one here has the current slide still on there and that we do not want it to have anymore so to keep things from working or to keep things working on more than one slide we can do my current slide current slide and we can access the class list and on my class list I can remove current slide and on my next slide my class list I can add current slide and I made a little mistake here and I want to highlight it before I hit save I put the dots here and I've been using the dots of my career selector you put the dot because the query selector is gonna look for an element it's gonna look for an ID it's gonna look for a class it looks for whatever you tell it to look for it's a little different here because I'm looking in a class list I'm removing or adding from a class list so in this case if I had a dot it's not gonna work because it thinks that's actually part of the name itself so if you're adding it would add like dot current slide and not the class of current slide so when you're using a class list no dot if you're using a query selector you need the dot that's something that has I've run into problems with that in the past so just want to give you a heads up on that one so now we have my current slide we can see is here so when I click on that current slides removed its moved on to the second slide and that means now I should be able to click hey and move on to that one really really awesome I'm so happy that worked so we get to our third slide now we need to do all this but we wanted to do it when we go in the other direction as well because now we've run into a problem that I can't move back because my other my slides on the other side aren't working the other problem is I can't actually see my button so I could use I think it's here but we could use a Zed index but I think at this point we understand how it's working so I'm gonna go to my track container and do a overflow:hidden on there so there we go now we can actually see our buttons on both sides and we get the real effect of yeah so we'll give that a little refresh and now I should get the real effect where I can move on over that way so really awesome I'm really happy it's working but of course this one's not working now and we need to get that working we also need to get these working and updating and all of that ah now one thing that's gonna happen is we could go through and code this whole thing up but it's gonna be really repetitive to what we did here except instead of a next slide we're doing a previous slide but everything else here is going to work pretty much exactly the same way so for repeating sells a lot it's better not to repeat ourselves too much we we don't want to repeat ourselves I kept going down here it's up here we'll be writing it but I don't want to repeat myself if it's a lot of the same stuff that I'm using it's much better if instead of repeating myself I am just coming up with a function that I can reuse just like I said slide position here I could reuse this in other places so we're gonna do that here and it's gonna make our lives a little bit easier so I'm gonna start let's just come right up to here and we'll put it in so we're gonna do a Const of move to slide because I think that makes a pretty obvious name of what it is and it's gonna be a function so we're gonna come in here with our little arrow function and we're gonna have to think of what we need we are and I'm going to sort of use this as our template so we used our current slide so we're going to do current slide so actually I can take all of this and just copy it and paste it into here but there's only a few little differences one of them is this amount to move we can't really get an amount to move because it's gonna be different whether we're doing forwards or backwards and we're actually gonna use this over here as well so the amount to move well it's cool and nice that we can have that as a constant here we're actually just gonna have to take this and plug it in right in here so it's not as obvious what it is I think this is a little bit clearer but we're gonna have to write it in like this instead sadly and the other thing is I'm not gonna be using next slide because sometimes it's next slide sometimes it's previous slide or sometimes it's this like if I'm on the first one and I click on the third one or if you have 10 here and you're clicking on the seventh one it's not always next or previous so I'm gonna call this one at Target slide target and here too I'm going to change this one over to target so always whenever we change slide the current slide will lose its current slide and slide class the new slide that is moved in which was our target is going to gain the current slide class and we're always gonna be tracking where we're going and how much we need to move by now all three of these need to be arguments up here so we're gonna do my my current slide and my target slide because these can change inside of each one of my functions so what I can come down out and actually come and delete all of this and just put in move to slide so we're going to use this function that we just created we still want the track just to be the normal track we want the current slide to be our current slide but our target slide in this case is going to be my next slide and it's important that we keep these here because every time I click this is changing so when I click it's going to evaluate what the current slide is and it's going to plug that into here and when I click it's going to evaluate what next slide is and it's gonna plug it into here and the way this is working is it's taking my next slide it's plugging it into here and then that's coming up to here so and it's taking and putting it wherever we have target slide here so whatever I write here is coming into here and getting filtered in and it's running through all of this so the same thing my current slide it's evaluating what my current slide is it's putting that into this function that's all the way up here so when I hit save now we can come and hopefully a good that little green flash had me worried there but it's still working the way we want it to and the nice thing with this is we can make it work super good for our previous button to previous buttons we don't have to write all that stuff out again add eventlistener when I click whoops and if you're watching this and you think like I'm just going to copy and paste if you're new to JavaScript to try and come through and actually like write everything out even if you're repeating yourself a lot just because it's muscle memory and you're going to learn especially like say you don't remember next step element sibling super well just typing it out can make it a lot easier in the long run but in this case I'm actually gonna copy this just because I am doing a demo and I want to make it move a little bit faster the only thing that's different actually with our previous button is we don't care about what the next slide is we won't know what the previous slide was and if we're looking for the previous slide it's not our next element sibling but it's our previous element sibling so now we can do the same thing before move to slide track current slide and previous slide in this case so when I click on the next button it's plugging my next into the target slide and when I click on the previous button it should take my previous slide and plug that up into here and use that so we're using the same function backwards and forwards so let's go this way and now we should be able to go back how it works awesome I'm always nervous when I'm doing stuff with JavaScript that it's not gonna work and then I end up with a problem and so that's it's always gratifying for me when it actually does work how you expect it to work it's a lot of fun another thing now is the dots are not actually updating so we and we obviously want my my dots to move around so we have to come and set that up so I think what we're going to do first is just do it for when I click on the buttons and we'll take the functionality of the colors moving and all of that and add it in so when we click on the arrows I think makes the most sense so just like before we needed to have a an event listener so we have the same thing here I have my dots nav add event listener now one thing that's important here is I could do a separate event listener for each one of these but that would be not a good idea because then we're adding three event listeners when I can do it with one event listener and that just slows everything down a little less event listeners you can have the better just event listeners are a little bit heavy so the more you can reduce them the more I would encourage it so here I can look for a click anywhere in this and actually I want to come back to my style here just for nav I'm gonna put this pink background back on just to show you it's going to come up where you go back to our console here because we're me console logging a little bit um so my add event listener just like before we're gonna be looking for a click and when I click we want my event and this is gonna be really important that I've put in there because I'm will do the first one we want to find out what we've clicked on so you know what what in the K tour was clicked on so how we gonna find that well we want to I'm going to do target will call it target and dot and we're going to use our e here so if you're wondering what E is and I'm not leaving it we're going to come back but let's do a little console log and this console logs going to evolve over time we're going to start with this so console log of what my e is here on my event listener so if I click on this we get a whole bunch of information we get a click and it was a target the button carousel indicator buttons zero client tells me where it is and all of that fun stuff if I click out over here you can see it clicked target was the carousel nav because I clicked on the Navigant click on an individual button and it gives me some information on where I clicked and I can do that anywhere and I'm getting the information on whatever I am clicking on and if I click on this first one you can see that the current slide is added in there so the e is tracking the event itself and giving me all the information on that click event so what I want is not just the e by itself but we want the target so we can just like before add dot to target and hit save so now when I click on one of these it's telling me what I'm clicking on just the target it's not giving me all that extra information it's just telling me exactly what I've clicked on and one thing I want is I don't actually want this to run if I'm clicking out here I'm gonna have a big function here and I don't want the I don't want the browser to have to evaluate that whole function just to realize I'm not actually using it when I've clicked out here so if I'm clicking out here I want it just end I want things to stop so my target dot we're going to do target here just like I had and so one thing we can do in here also is look for the closest and tell it closest what close this button so and let's just I'm going to change um repeating myself a little here it's a little silly I can just put the as target dot so let's save that so if I click out here we should get null so I haven't clicked on a button so it's saying that no there's nothing I'm not logging anything so the target dot has nothing it's an empty Nell Nell Nell Nell you can see the number here keeps coming up as I click and then as soon as I click on a button oh we've clicked on a button so I'm logging that now I'm saved this as a constant oh we're back to Nell oh I clicked on a button again so I'm only interested in the target dot when it's actually a button so that's what I've done here so what I can add is right here and actually let's do it twice here I'm gonna have to console logs that are the same I don't know I'm gonna put test test one and it's copy you and add in a test two right here and what I'm going to do in between these two tests is renew a little if statement so if target dot correct I'm gonna save that so now if I click here we see test with one if I click on a button we see test 1 test 2 test 1 test 2 test 1 test 2 but I'm gonna click I'm gonna trash all this actually and it's click here we only have a test one let's do it one more time trash and click test 1 test 2 so what's happening is if when I click the target there isn't target dot is returning as a falsie statement which null is a falsie statement so if if it's false return and return in a function means to stop the function here so if I've clicked on something that's not one of my buttons just stop don't even bother reading anything else exit out of this function we're done this event listener is over for now but if what I clicked on actually is a button then we want to keep going with the rest of our code so that's what we're gonna be doing here we don't need these console logs anymore but now we can actually start doing what we really want it to do in here so we need a few more things we want to know what the current slide is you know this one might seem familiar track dot query selector current slide we want to know what the current dot is so this one's a little different but you can guess how this one's gonna work except I'm gonna do a dots nav on this nav dot query selector so just like we did above this one's also called current slide sorry it's hard to type and talk it's something different at the same time so one thing it's important and we've all the way if we go and look up here I saved my dots as the the array here so I want to go and take a quick look at that because it's important for what we're gonna be doing now so if I just do a console log of dots it should show up when I click on any of these there we go so it's an array and we have our three of them and what's important here is I want to know which one I actually clicked on so what I'm gonna do is here do a Const of we'll call it target target index because it's the number that I'm trying to get to target index yeah and the way we're going to be doing this is we're going to use something called find index so I have my dots there so with my dots we can do a find index and the way find an index works is it's gonna loop through every item in the array and it's going to find the first it's gonna return the first through the expression that comes out of it so if you know anything with four loops it's a little bit like a for loop so here my find index I'm going to say for each of my dot each dot inside of dots I want it and this you know you can literally put anything you want here and just the name you're giving it so for each dot inside of dots I want it to do a function so it remember we're looking for something true we want it's going to return the first true thing that comes so I want to return the first dot that is equal to my target dot so my target dot is the one I click on so it's not returning the dot itself but it's returning the index number of that so let's save this oh whoops it console.log is not when I click down here so I have my array with three I in it but each I have a zero I have a one and I have a two so each one of these has an index on it and I want to get at that index number so if I change this to target index and hit save and when I click on this one I get one if I click on the first one and to give me a zero and if I click on the third one it gives me the number two because again it's 0 1 2 when you're using an array 0 there we go 1 2 with an arrays always start at 0 cool so that's a really important and very useful little thing we can do to find index on there because the target index is going to let us find the target slide is the target slide and this one's nice and easy it's just slides and normally you can put like a number here right so slide 1 would fight like it would be finding again the array starts at 0 so I could have slide 0 so I want whatever number comes from here I want it to come into here so this would be target index so whichever number when it was popping it before it comes from here that's the slide that I'll be targeting so I know if I'm on the third slide and I click on the first one I actually want to go to slide number one so that's what this is telling me to do now the fun part of this is we can actually come and use my move to slide again so let's hopefully this works so the track the current slide are all going to stay the same because my current slides always this current slide run but in this case instead of next slide we want to look at our target slide so and again just to reach us did a whole bunch of stuff so as a quick reminder what it's doing is when I click on one of these it's gonna find the whole track it's gonna find the current slide and it's gonna find my target slide so my target slide if I click on this one is number three so it's gonna come all the way back up to you my move slide it's gonna say my target slide is number three so it's getting all of that information it needs for number three it's gonna add the class it's gonna get the position and it's gonna move to number three let's click and it worked great so we can see I can click around on these and it's actually working we can jump around however we want if you had ten of them it would be working for all ten and we can still use our arrows and that's really really cool two things one we obviously need this to actually move when we switch slides and the other thing that's really drug me nuts right now is let's just go to my CSS and my carousel nav indicator cursor:pointer just so we have a little hand icon much better cool so now we really need those those icons to be moving when we do that so let's come back to here let's go back all the way down to here and we can set that up so let's see if we can't get these things moving around and it should be pretty easy to do I'm going to take our current dot and class list remove current slide and we want my target dot class list add current slide so now it should do it so I think I think that's pretty self-explanatory when I click there we go it's removing the class from the current one that it's currently on and it's going to go to my target the one I'm clicking on and add that class to it so we can see that the block is moving around now we need this exact same functionality when I click on these yeah there's a little over there that will take care of in a second but when I click on my arrows I also want those to move around and we've already created the functionality for this so actually you know what this it's gonna be the same thing over and over again just like our move to slide was so we're better off taking that out coming all the way back up move to slide and we can have Const update dots and we can have this being pasted it right in there so here we need to have our current dot and our target dot so very similar to how we were working when we were working up here we can set it all up over here except of course this should be a function there we go so update dots equals and then we need that then we are passing it through into here and it should work so that just means update dots we need to bring down to here so update dots we don't need the track we just need our current dot and our target target stop and test it out and it's still working cool so now we can take this exact same thing and we can copy it and bring it on to our next button so that does mean we need to come in here and say Const current dot is equal to my dots nav dot query selector and my current slide in this case will do my pre whoops it's the next button so next dot we can call it and it would be the current dot next element sibling so here instead of my target dot we can switch this over to next and I have a little typo here Const and let's see if that works there we go so when I click on that way it's moving that way so we're just instead of having the target dot like we on the previous one we're saying that it's we know we're clicking next so it's always the next element sibling so it should always be moving over one to the right so that one's nice and simple and let's just copy you over to here except this one will become previous dot and then this one will become just like we did before actually I think we did the exact same thing previous element sibling and we can copy this and paste it into here except this one will move on to my previous dot hit save and now when I go that way it should go that way when I go that way it should go that way and when I click on any of these the dot moves around and my slider is working you think we're done I can turn off my pink background on here as well now you think we're done but there is an error that comes up we saw it pop up and I sort of brushed it off before because what happens is if we're on the last slide and I click I get targets slide is null but it is running into a bit of an error there so we don't want people to really be able to keep clicking this way or if they get on this side to keep clicking that way just because it doesn't work so it looks like it should work there's nothing indicating it won't work so the easiest thing to do is actually have these buttons disappear when we're all the way to the left or if we're all the way to the right so to do that I'm going to come up to my or we're already in my CSS that works I'm gonna come to my CSS and Adhan is hidden class and this will just be a display of none so is hidden display is and then and I'm gonna come back to my index here actually and let's come all the way to here where my buttons are and we're gonna add is hidden at the start because when people first get to the page there's no left I can't go to the left so why should we show them that button so now we have a few things that we need to do we need to make it so when we click on this that button reappears when we get all the way to the end the button disappears and if we're using our dots the buttons reappear and disappear as needed so I think the way this actually is gonna make the most sense is by building it into our dots one here actually and then taking it maybe out and making it into a function we can reuse because it's going to be using our target a little bit our targets slide to be specific and then we can sort of make it work with everything I believe so yeah because we have a target index here we're gonna be using this number to help us out with what we're doing so we're gonna say if that target index is equal to zero we want the previous button class list ad is hidden and the reason we want to add the class is hidden and remember there's no dot because we're using class list when we if target index is 0 that means we're on the first slide because we're starting in 0 so we're at the first slide and we don't want it to go so that means we're on the first slide we don't need a previous button so we're adding that onto there it also means that if we're on this one because we can be using this to navigate so we could be on the third one and then click onto the first one so that means if we were on the third one this one would have been hidden so let me click here so we also want to say that my next button class list remove is hidden because we just want to make sure that there's no no hidden class anywhere except in one place next we need to say else if the target index is equal two slides length so if you don't know what length does the slides is in a race we have three items in it so the length is 3 so this is going to give me the number 3 but remember when we're using an index it's starting at 0 so we go 0 1 2 so even though we have three items our number is the number two that we're on so we're gonna say minus 1 just because that's that's how we have to do stuff when we're using arrays so if the length is if we're on so this is pretty much saying if we're on the the last of our slides we want to do the opposite we want to say our previous button class list remove is hidden and our next button class list add is hidden now this is a little scary I've written a lot of jobs come here without actually testing to see if any of this is working so before we worry about any other scenario let's click and see what happens and it's not working of course okay then I forget to save sometimes that happens no okay so it's really not working but I'm not getting an error so if target index target index so actually I'm gonna run a console log your console log target index just to see what's happening when I'm clicking here and why it's not working oh we're not getting why are we not even getting to here oh yeah okay I can delete that console log and hit save I am I'm worried about if I click on these and that when I click on that so if I click to the third one there we go if I click on the third one this one disappears if I click on the first one this disappears and this reappears but if I go in the middle it doesn't update so the last thing we want to do here is just an else I could do another else--if but in every other situation because there might be 10 buttons again we can just say previous' button class list remove is hidden and next button class list remove is hidden because we don't want it to be on any of them and again there may be 10 little icons along the bottom here so no matter which icon were on that's not the first or last one we want them both to show up and look at that it's working so we can reuse this functionality just like we did with everything else here so I'm actually gonna cut that out from there we're gonna move all the way up it doesn't all have to be together up here it just makes it a little bit more organized if you keep all of your functions together so we'll call this one tied show arrows turn nav arrows I think it makes more sense than nav because the nav is this thing on the bottom so that's going to be equal to plug it all in there and then this can we need our we need our slides because we're using the slides here we need our breathe button and we need our next button and is there anything else we need our target index of course target index so I'm literally just looking at the different things we so we used a target index previous button next button and our slides and I think those are all the different things we plugged into here super so now waking them all the way back down and here we can call this add/remove I was bad height right ad hide arrows I don't remember what I called it let's just come and copy-paste I'm getting a little tired show hide hide show hide show and let's just take all of this copy and delete that so hide show arrows and save so now when I click here and not there when I click on these it should work perfect so it's still working I have it as a function here but now because it's a function I can copy it from there and we can move up and put it into here so in this case the only one that's target index I don't actually have a target index in here so we can have to add it in Const next we'll call it next index is current is next slide no not next slide we need to use our index thing here so I'm going to jump into my slides to find index and X there we go type it right so just like before when we did this for our dots I wrote dot this time I write slide because we're looking at slide so for each slide it's going to look for a that is equal to next slide so it's gonna get the index number that is for my next slide there and it's gonna use that right here save and we can take we'll copy you here and we'll copy you here and this one would be my previous slide slides find index slide slide and previous slide so I did all of that right and I think I did we should be able to click and it's working and I click and it should hide on that side good so I can't keep going that way because we're out of slides and then I can come this way oops you see I made a mistake here so it's always good having the console open because it actually worked but now it's not gonna disappear and it hasn't brought this one back because it's saying that next index isn't defined and it's because when I was updating all this I had next index here next index here I changed previous here I changed previous see here but here it still says next index so it doesn't know what this next index is I forgot to change that one so save this should refresh you move that way and we can move back that way and it is working nice and perfectly and we can use our arrows so there we go it is all done and I'm really happy with it I hope you enjoyed this I hope you learned a lot from it I realize it's a really long video and I apologize for that but it's a really big thing to do to build one of these and now it's not perfect there is more refractory that can go into this and actually make it more concise and a little bit better but I think we've done a really good job with it so far if this was your first foray into JavaScript it might have been really really overwhelming because I did a lot of stuff here and some of it's a little bit advanced so it can be kind of confusing and I won't lie I was super confused by all of this for the longest time and what I would do is I'd take stuff like I just built and then I'd sort of try and find ways to tweak it and make it work for what I did and it would work and I've sort of be happy but I wouldn't be able to build something like this on my own and actually I didn't build something this a specific thing on my own because this is from Szell's course but the thing that was nice about Szell's course and I'm very happy that he let me build his carousel because it's really good but he runs through everything I did here he pushes it a little bit further but it took a lot of lessons to even get to this stage because we first you first build it out be using like a really basic way a little bit like hell when I first tackled it when I first started things I was I wasn't setting it up just like this at the beginning I was doing it a longer way and then I brought it up and improved on it so at the beginning of his course it's very let's learn the basics let's see how the basics are working let's see how we can take what we've learned just to make something work it's not about learning the best way to do it it's but let's take what we've learned and make things that are functional instead of just learning theory so you keep building stuff keep building stuff but then as you learn new things you go ok let's look at what we already did and well we could have done that in a better way and then you go that makes sense because you're actually applying it to real world situations and you're adding in shortcuts and adding those shortcuts when you don't know the long way to do it can be really confusing so I realized this course is expensive and I realize it's not for everybody but if you do have the funds and JavaScript is something you really want to learn I would strongly encourage you to check it out again this isn't a paid advertisement this is just me saying it's a really good course I learned a lot when I did it and when I worked my way through it and I really think he takes the right approach to it one thing that's really important is it's a written course it's not a video course like I do here on YouTube so for some people that might be a deal-breaker so just to be aware it's written course there's challenges in it which are really fun because you get to the end of lessons and then he says ok you learned how to do this now do this other thing with it and it pushes you to try new stuff or to reinforce to make sure you know that you're actually learning something because just reading it or even watching it new video it's not the same as actually doing it and doing it on something a little bit different so he's not saying go and do the lesson over again but without reading it it's here's like a new piece of you know a new file to work on see if you can do the same thing onto here so again it's a really good course I think he's styled it in a really good way that does lead to a lot of learning so if nothing else I'd encourage you to check it out again Thank You self for letting me take one of your components again in the course there's actually 20 this is just one component and the course isn't finished it he's still working on it but there's really awesome stuff in there so again I'm going to encourage you to check it out but that's it for that happy New Year to everybody welcome back and we're sort of gonna be and some weird videos for the next couple of weeks until I get my feet back under me one video a week until that might be a while till the Friday 5-minute Fridays back in thank you so much for watching all of this if you are not checking out a Zell's course that's all good I hope to see you around though thank you for watching and think big thank you to my patrons for help supporting everything I do here if you don't know about patreon you can go and check that out it's where people can support this channel or support other creators that they like what they get from them so you can check that out if you're interested I look forward to seeing you next time and until then don't forget to make your corner of the Internet just a little bit more awesome