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

Key Takeaways

hi and welcome in this week's video we're going to be looking at how we can build this carousel right here with vanilla JavaScript we're gonna be starting from nothing a blank HTML file we're gonna style it up and then we're going to do the JavaScript to build it out so here we have the arrows we can navigate that way and this way we have our dot navigation thingy down here so we can click on those if we get to the end of it the arrow here disappears or if we get to the end on the other side the arrow there disappears and all of this would work no matter how many slides you have hi there and welcome back to my channel it's a new year is 2019 this is my first video of 2019 and it's a week earlier than I planned on doing but there's a special reason for that that I'm gonna get you in a second and we're gonna be doing in this one we're not gonna be making it functional just yet we're not gonna be doing all the really fun stuff we're just gonna be doing the HTML and the CSS because it was a really long video if not it turned into almost two hours and that's too long for a video in my books you don't want to stick around for that long so this one is quite a bit shorter do all the markup and all of the CSS and then in the next video we're going to go and tackle the JavaScript itself that one's still a long one but it's a little bit more manageable that way so they're both out now so if you just want to skip to the JavaScript because you're pretty good with HTML and CSS you can even though this video will affect how I'm writing that JavaScript so just so you're aware of that it is you know some of the stuff the way I'm organizing my Styles and the way I'm organizing my markup does affect the JavaScript a little bit so if you you know I suggest you stick around for both but if you really want to jump into the next one it is up now it's ready to go there's no waiting a week or anything like that like I usually do for my next video but yeah it should be a good video I hope you're going to like it but the reason it's a special video and the reason I'm doing it early is because I'm actually doing it to promote something but it's not a paid promotion I'm just doing this because it's something that I really think is worth promoting and that is Szell's course so zell has opened up his javascript course he only does it remember it's every three every six months but it's not all the time because it's still a work in progress but it's really fully built out now we're not fully but there's a lot of content in there now like a lot a lot a lot of content so I am a student of this course I joined up way back when he was I think first opening it and I learned a lot by this course and it changed how I see JavaScript and I'm I'm here to I get lots of people asking me about JavaScript and making videos on JavaScript and I will be doing more of them just like I am today but I wouldn't be able to if it wasn't for this course so I felt that it's opening up for I think as of recording I think it's like eight more days we're gonna look at there we go nine more days and by the time this is up probably seven or eight more days and so I just wanted to let people know about it because it really was a giant a game-changer for me in how I approach to have a script and I think it could be a game-changer for you on how you approach it because javascript is overwhelming compared to a lot of learning HTML CSS you'll see the pricing on it is kind of expensive but you're getting a lot of content for it so there's the starter pack or the mastery pack you know if you're going with the mastery one at $500 it's probably a too much for a lot of people and if it is that's fine but if you are really looking to learn JavaScript and something you think you can afford the 20 components and the lessons for really really really good and the way they do it the way he approaches learning JavaScript is no fizzbuzz and no weird concepts it's about learning things that are practical and applying them in practical ways and really learning step by step and not skipping stuff along the way and I really learned a lot by not only on JavaScript but just how to approach teaching a really heavy topics or very in-depth topics through following his course as well so I really think it's for me it was good enough that I'm very glad to freely promote it to my audience and I think you should think about joining but if you're on the fence you're going to holy crap that's a lot of money this is one of his components and I'm not building it exactly the same way he did I've sort of taken my own twist I haven't actually pushed it as far as he pushes it in terms of optimizing it but we get most of the way there I couldn't make them longer than it already is so this video gives you a little taste of what you can find in his course if you're a little bit on the fence and of course if you're just looking at how to do this lighter and you don't care about its course at all I'm not going to talk about it again until the end so let's just jump right into it okay so here we are with our blank page with nothing at all on it and we're gonna start doing our carousel I'm not gonna do too much but I will be using Emmet to write my HTML just because it's a little bit faster if you've never used Emmet you can get it very easily as an extension or if you're using vs code like me it is included so that's nice and handy and the way Emmet works is if you want a div you can just do a dot carousel and then push tab on your keyboard and it will autocomplete it for you and if you need something a button which we're going to need now I can write button dot and then carousel button let's say and hit tab and it's gonna give me that class and we're actually only need two buttons so I'm going to copy that one and paste it in because we will need to I'm also using live server right now so if I save that now you can see that automatically this refreshes and my two buttons are there so anytime I hit save it will be refreshing automatically that's live server which is an extension on vs code but there's many other ways of doing that and I'll include a link to that in the description below as well as some links to some other a video I have on other ways you can do the same thing great so for our carousel what we have our div here that's gonna be our main carousel and we're gonna have our two buttons inside which is gonna be our left and right navigation buttons and then we need the carousel itself so it's coming in the middle here and we're gonna give ourselves a div so we're gonna do a carousel track not tracker track container let's call it so you'll notice I'm doing double underscores that is just so I mean my carousels these are elements that are living inside of my carousel so it just makes the naming of things you know if it's a single - we'll denote that the track container is one word the double underscore is like it's a track container that's part of my carousel so then we need our slides but for our slides what we're gonna do is were actually in have a ul and I'm gonna call this one carousel track so I'll hit tab on there again so we have my carousel track itself which is a list and it's quite common you'll see carousels done as lists it could be just like a set of divs for all of your slides but doing it as a list makes sense when you're thinking about accessibility and all of that because of usually the type of content that's in there I think a list actually doesn't make the most sense so if it's a list then we narrow our list items and I'll call each one of these at carousel slide because I think that makes sense and I can do star 3 and hit tab and it pumps it out just like that now if you don't know Emmet and this is the first time you're seeing it we could actually do all of this with one stroke and then hit tab or one instead of typing it but I'm gonna keep it pretty basic for now just for simplicity sake and on each one of my slides I'm gonna throw an image in here now for my images that I'm putting in here we could put them we could actually have a link in here and then so each carousel item would be clickable we could put text with an image we could put no image just text and then have the images of background images there's many different ways you could approach this I'm just going to do it as an image inside for the demo purposes so we're not getting too into the main focus of this is the JavaScript itself so I want to do something really simple so we're gonna do just a regular old image someone doing they're just a little bit because I can come in all three of these and do it at the same time so I'm just pushing control on my keyboard while I'm clicking or you could do a command and place your cursor in multiple places at the same time which is always handy image SRC and I'm gonna go into my image image folder which I've already done and you can see here I do have some images already in there so we're just gonna put slide 1 for the time being and I'll put a blank alt on there and yeah so that's some of my slides but obviously this one number two and this one here will be number three and I'll hit save and we should see some images come in there so there's my three slides that we're going to be using cool for my buttons themselves you want those to be clickable so I guess I should put some content in here so this is my carousel button and on this one I'm going to be putting I'm just there SVG's but I'm just gonna do an image and I'll do care will do a class on these two class we went through a class we'll just do an image image SRC and my source here again will be in my image folder left should be my first one and copy all that bring that down to this button and that will be my right because these are SVG's I'm gonna save that but we'll see they don't actually appear yet when my CSS I'm gonna have to give those a bit more of a size because right now nothing is actually showing up in there but I have my two buttons and the last thing we're gonna want in my markup here is sort of like so right now I have my button to go to the left I have a button to go to the right I have my three slides and I want one last thing which is gonna be like the little no those indicators you get that say like you're on slide two of three or slide three of seven or whatever it is we're gonna give ourselves some indicators so I'll come down after this button and this would just be a div and we'll call it carousel nav because I think that makes sense where it's our navigation for our carousel and each one of these give me a button so I'm a new button with a class of carousel we'll call it indicator because it's an indicator of what slide were on so I think that makes a lot of sense and we're gonna need three those so times three and I can hit save I don't actually I won't have any content in these they're gonna be blank so right now we don't see much but with some CSS we'll style those so they actually show up a little bit more so as far as the markup I think that's it we're gonna be jumpy meking here to add a couple of classes at one point but I think for the most part that's all we really need to have in here so we have our main carousel container that's going to hold our army and carousel div that's holding everything we have our left and right buttons and actually I'm gonna add that on here because we're going to need those to say what direction we're going in so I'll call that carousel you know I could if I'm really doing them I could do like button left like that so it's a modifier to go left but I think I'm just gonna do yeah you know what we'll do it the proper way I was going to come back on that but why not if we're using them we might well go all out so the double hyphen is indicating that it's a modifier of the actual carousel button no I'm not going to do that because I'm not using this for CSS purposes I need to use this anyway to get my buttons where I want them to be so yeah we're gonna leave it like that my so this is my double hyphen is indicating that as a modifier and the reason that we have a double hyphen is it's showing a difference between your truck containers like a single word but we're just using that instead of a space because we don't have spaces in class names so track container has a single - this is indicating it's not you know button right it's it is my carousel button but I'm adding a few extra little things on it so I'm modifying my original carousel button to place it on the right or the left and we'll also be using that to selected in our JavaScript cool so let's save that and all of that is done so now we're going to move on to our CSS which shouldn't take us too long but I'm gonna make a new folder and call it CSS and in there we can make a new file called style dot CSS call whatever you want but I'm gonna go with style dot CSS and I'll go back here and before I do any work let's link that up CSS slash style dot CSS cool so CSS we're gonna start just with our carousel and I'm gonna give this a position position:relative I don't know if we need it but I'm gonna put it on there anyway height I'm just doing 600 pixels because it's for demo purposes but if you have a different one that you want go for it and I'm able to width of 80% just to limit the overall size will give it a margin of 0 auto just stick it in the middle and I think that's about it for the moment my pictures are too big should I call those carousel images I'm gonna call them carousel images with a class name I wasn't gonna put a class on them but what we give them a class class equals carousel images image would make more sense and we'll just do this really fast carousel image will be a width of 100% for now I'm gonna be coming back on the image a little bit afterwards but for the moment that should be fine good so now let's move on to our carousel track and inner some long names in here it's kind of annoying but we'll make do I made this a background of light green just so we can see it and padding for the moment padding this will come off but just for demo purposes I like giving things color so we can see that my my all my images are inside of there by default so whoops so this should be padding not passing this we can there we go that makes more sense and right away we can see that there's some issues with the spacing and everything here so that's because of my carousel track is my ul right so padding of zero margin of zero and list-style:none there we go so now my images are fitting in there a little bit better now I'm gonna look at the images not the images but the slides themselves so carousel slide and just because we need these to be a position of absolute so they actually stack on top of each other for now that will change once we get into the JavaScript bottom of zero and we'll do a width of 100% should work fine there we go so they're all stacking on top of each other but there's a problem see the little green thing I had before it's not really doing what I want it to do because these are position:absolute so I'm actually going to give my track container a height of 100 percent which so now my track containers the height of this 600 pixels so that's good but my images aren't really positioned in there properly so this probably also needs a position:relative there we go so now it's this is relatively placed inside of there and now if I take off my padding we get rid of that issue of its ticking off the slide a little bit now the one problem I still have is my image isn't as tall as my track container because I said this is 600 pixels and I said that my image has a width of 100% so the width is matching and that means the height isn't quite there so I'm actually going to give this also a height of 100% and this is an image isn't the most obvious one but when I do that it's stretching the image out this was someone's face you'd really really see it they get really skinny all of a sudden and we don't want that to happen obviously so what we can also do here as an object fit cover I do have another video on object fit cover there should be a card popping up now that's it's like five minutes long it explains how that works if you've never seen it before and the nice thing with object fit cover is what it's actually going to do and we'll see it now as I grow this it's cropping my picture so it's a lot like background size cover but for actual images so that can be really really handy little trick if you didn't know about it already so nothing it should be a Jas video but we can throw some CSS fun stuff in there while we're at it so we need to position my buttons so that they're on the left and the right and we want these to actually look like something now so we'll start with the buttons I think I'm just hoping I'm not forgetting anything but I think we're good along here so I have my slide so now we can do carousel button so for my carousel button again we're gonna want to position:absolute and then this time I do a top of 50% because I want to be in the middle now the only problem when I do that is it's not actually going to the middle it's putting the top of my button at the middle and just to really illustrate this I'm gonna turn this off in a second but say I give it a height of 200 pixels so now you can really see that it's the middle that's sitting at the 50% because it's stretching all the way down so the easy fix for this is to then do a transform translate and in this case I want Y because Y is up-and-down and negative 50% because I'm moving at 50% down the height of its parent but then this is moving it on its own size so it's gonna take half of its size and move it up by that so now it's positioned perfectly in the middle and now I can take my height off and we're good since we're here normally I don't work this way I like having I don't like nesting for certain things but I'm gonna be lazy on this one so this is for those SVG's that I put in let's give those a width of like 20 pixels so we can actually see and that's way too big maybe even half that a little bit bigger we'll go with that and we'll play around with it a little bit back to the button here we want to give this a background of transparent and a border of 0 because buttons always have those borders on them and now I can barely see that it's even there so one thing that's really important to do in general um I'm gonna put my buttons out on the sides instead of having them on top of my image if all of your images are really white there's ways of doing it but you want to make sure that the button I could make like a big div here that sort of lightens it so we can always see it but I'm just gonna move my buttons out to the side for this one and that's where my carousel button left comes in because this is my modifier so it's using all of these styles but the left of it I think is gonna be negative 15 pixels any more than that I'll go a little more 3050 we'll get there eventually probably too much now I'll stick with 44 now so it's sticking out the side there and the last thing we want to make sure that it's obvious that it's clickable because it's not very obvious right now so I'm gonna do my cursor as a pointer and now at least when I go on top I get my little hand icon there and here we going to take my carousel button right and we can do a right of negative 48 pixels and then it's gonna stick off on the right side so we have my two buttons that we can see and click on now so that's perfect and we'll eventually with some JavaScript make that actually work so the last thing we need to style up I believe is my little indicators here so let's come down here and that was my carousel little indicator so actually I'm gonna do my carousel nav let's give it a red background just we can't really see what's happening here or do pink because pink is a little less offensive so we can see that the nav itself is stretching the full size even though my buttons are only there and we'll also do carousel in the K tour I'm just going to a few things here really fast I'll scroll down so it's a bit easier for you to see border 0 and a border radius of 50% to make them into circles with a width of 20 pixels height of 20 pixels and I'm gonna do a background of black for the second we'll change that but there we go we can see them they're probably a bit too big maybe bring that down to 15 okay but I want those to be in the middle so the only reason I added this well I wanted to get there eventually but up on here I'm gonna do a display of flex oops flex which doesn't change much until I do my justify content and we'll do a Center on it so we can bang it in the middle and then unison here we could add a bit of padding padding of 10 pixels zero and these will need a bit of margin margin of 0 15 pixels maybe might be a bit too much 12 10 something like that anyway I think that should look okay I'm gonna change this from black to an RGB that's block zero zero zero and we'll go with like a point three and of course now we don't need our pink background on there anymore so I think that'd be pretty good and I'm gonna come back to my HTML file for a second because I want to have a current slide so it's we're indicating which one is the current slide on my indicators here and so that means when we have my carousel in the caterer which is also a current slide and this is where we could use a modifier clasp and all that but I'm gonna do a background of rgba 0 0 0.75 or something like that so the current one is much darker than the other one so if we click here to switch it's going to show us or if I click on those the darker color is following us along to act as navigation and let us know what slide number were on and that's it for our markup and for the styling of it also the CSS is done the next video is where the real bread-and-butter is it is up now so you can go and check it out without any hesitation I didn't think it was important to break them up just to make not one like two hour long video but I look forward to seeing you over there when you're ready to go and tackle the JavaScript