Can I Create Netflix’s Video Carousel UI?

in today's video i'm going to be attempting to create netflix slider ui and this is a lot trickier of a ui than it may at first seem and this is going to be my very first attempt at solving this so you can see how i go about approaching this difficult problem what i do when i run into issues and how i overcome them [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner in this video i'm going to be showing you how to create this netflix inspired slider ui and this slider ui is super nice because it has these arrows in the left and right which move you back and forth by 100 essentially it has this section at the top that tells you how many videos are left or how many tabs are left inside of this and if you get to the very end or beginning of the list it's just going to cycle back in an endless loop which is really useful this may look really simple but it's got a lot of moving parts and i think it's going to be pretty difficult to implement and again this is going to be my first attempt at solving this problem so you can kind of see live how i think about solving this the very first thing i want to do is to create a inde or a style sheet so we're going to say styles.css and we're going to link that in our html so we can say link that styles.css and now i want to think about how exactly i'm going to solve this problem so the way that this slider works at least in my opinion is you have these different items and essentially they each just have a width based on the size of the screen or whatever and then when you click this right or left arrow all it's doing is moving everything to the right or left by essentially 100 of its width so you can think of these three videos as like the container and then the left and right are just to the left and right of that container and when i click right the entire container moves by three video widths or essentially one hundred percent of the visible portion and it just continually is going to slide over and over and over the only time where this gets a little tricky is if you get to the very end of the list you need to have some javascript trickery in order to like do the cycling back for you but that shouldn't be too difficult i don't think and we should be able to implement that on our own uh this section at the top here where it kind of shows you like where you are in the tab again pretty easy to implement with javascript i think the hardest part is going to be getting that sliding portion to work just fine so let's kind of start tackling that first i did look up ahead of time a site that we can use to get placeholders and i'm just going to use this to give us a bunch of images essentially that we can use inside of our slider and i want to think about the ui or the html for the slider so first what i want to do is i want to have some type of container that's going to wrap this section right here that has our slider then i want to have our slider and inside of that i want to have the images the reason i'm doing that is because the container i want to essentially have like our overflow hidden property so we can like cut off what is actually being shown so we could have like a container here and if i spell container properly oops container and then inside of that we can have our slider so we can just call this slider i guess and then inside of here is where we want to put all of our different images so i'm going to use some emit for this we're going to have our image which is going to have a source and that source is going to be for this placeholder ui right here so this is just essentially a placeholder image that we can use and what i want to do is i want to make the size of the image change and i want to make the text inside of it change as i create more of them and let's say i want to create nine of them i guess so hit enter i'm going to clean up this code a little bit so everything is on its own line there we go there we go this just created us nine different images and when i click save and come over here you can see we have nine different images and each one of them is slightly bigger than the last there's a few reasons i'm doing this one i want to make sure that no matter what size image i'm using it's going to scale properly for the video format because on netflix these different placeholder you know images they could be different sizes so i want to make sure they're all going to work no matter what size they are also i just want to make sure that it's going to work with multiple images that's why we have nine that's more than enough to fill our entire screen now to clean this up a little bit more i'm just going to get rid of these alt tags because we don't really need them for what we're going to be doing there we go make this a little bit wider by getting rid of that sidebar there we go so that we have our nine images inside of a container that we call the slider now what we want to do is actually create the css just to put this on one line because right now they're on multiple lines it looks pretty bad let's come in here we're going to have our container first of all actually what i want to do is i want to get my elements here so we can say after before set up my box sizing to border box then we can select our container our slider here and then i think i don't know if we actually gave our images any classes but for now we can just select them by saying like slider image so now we have our container which is going to essentially just be 100 width and it's going to have some overflow we have our slider and then we have our slider images so the way i want our slider to work is i think i'm going to be using flexbox for this that's just going to be an easy way for me to put them all in one line so if i say display flex you can now see everything is on one line and it has a giant scroll bar it's also going to help a little bit with making sure all of our images are the same size so the next thing i want to do is on each one of our images i want to give them a specific width and that width is going to scale based on screen size so let's just start with like width 25 for example now we can essentially fit four boxes on our screen um let's see we can also set an aspect ratio so let's say aspect ratio is going to be like 16 uh by nine and that's going to be a similar aspect ratio to kind of how netflix has this over here and i want to have a little bit of padding so we'll say like padding is .25 rem so that gives me a little bit of space between each one of these elements and you can notice that their size is actually slightly different than you would expect that's because flexbox is like growing and shrinking a way to get around that is we can say flex zero zero 25 percent what that's going to do is say flex grow is zero flex shrink is zero and our width should be 25 so it essentially prevents flexbox from doing any of its flexible stuff the main reason i'm using flexbox here is just so we have our child elements inside of each other fitting inside of each other super nicely so let's see if this works let's say we give it zero padding okay that looks like it fills the space mostly let's do like one let's do five rem kind of see how that looks yeah clearly it's not quite working as i expect because right now we only have three elements on the screen we want to be able to have exactly four elements no matter what our padding ends up being let's come here with our container we want this to be essentially a width of 100 and our slider should be a width of 100 because since we have border box this padding of 5 rem should be taken account into this width maybe that padding is just like too big it's bigger than our actual size so let's change it to like 2 rm let me inspect and see what's going on here oops not console elements so each one of our image components here has a width of 274 almost 284 that one's 294 304 okay so there's definitely a problem with our images not being sized properly let's set like a max width of 25 to see if that makes a difference okay that looks like it made all the difference we needed i think the reason that this issue was occurring is because we had different sized images but now when we set our max width to 25 it's making sure that they never get bigger than that because by default our images were actually bigger like this 210 pixel image was bigger than 25 percent which is why it was giving it that weird issue okay i think that's pretty good yeah now let's just change ours padding to like 0.5 rem or something maybe even less 0.25 rm it's pretty small on the netflix site and there we go now we essentially have our four elements side by side and if we want to slide this all we have to do is take our slider here we can do a transform translate in the x direction negative 100 and boom now we see the next four items we do another negative 100 so we change it to 200 now we see the next four even though in our case there's only one more element because we have an uneven number so i think that is working as we expect yeah it looks like there's a little bit of the image showing on the right hand side when i do like negative 100 there's a little bit of the image showing on the left hand side i think that should be fine though the reason that's showing up is because we have some spacing on the left and the right of our container based on the body so the body has some of its own margin we can just change the margin to zero and that'll get rid of that there we go okay um now let me think let's change this back to zero there we go so the next thing we want to do is we want to make it so our container has a certain size and that way we can put our icons on the right and the left so on netflix you can see we have the right and the left arrow what we want to do is just give these right and left arrows a specific amount of space so we're going to take our container and we're going to do like for example we could do 90 if we did that that means that there's going to be five percent space on both sides that looks like it didn't quite work as expected so container 90 our slider should be full width inside of our container um oh one thing that we can do let's change this to display of flex as well and then we can justify our content in the center that didn't quite work as i expected make sure this has a width of 100 maybe or 90 percent let's get rid of the width on that so we have yeah okay width of 90 okay this looks perfect so we essentially have a five percent overlap on both sides or if we wanted to make it a set size we could do like a calculation here where we do like 100 minus uh let's say like 10 rem that would be huge that looks pretty good so now we're saying our left and right side are always going to be 5 ram each um yeah so we can even make a variable for that let's just say like uh slider padding is 5 rem for now and then we can just say 2 times our slider padding there we go i think that should be good and if we do our translate by negative 100 yeah perfect so you can see our four items in the middle and we have a little bit of the left side and a little bit of the right side element showing that looks i think exactly like we wanted to we can go back to zero percent um the next thing that we're going to need to do is let me think here so we have our images we need to create the actual left and right arrow content that's going to show up so let me think of the best way to do that what if we can do it with just a before and after probably not though that might be a little difficult so inside of our container maybe you'd say let's do it inside of our container what we could do is we could say um this is going to be like handle and this will be the left handle and this one will be the right handle there we go and if we select our handle and we give them a width which is our like slider padding now just for now just give them a background color of red so we can see them there we go so you can see our two different slider sections and we want to make it so that they're going to show up on top so we're going to give them a z index of like 10. there we go that way they show up on top of everything that looks good um do we want to give them the same padding probably um that didn't do anything it didn't look like i didn't because let's see what they do on netflix yeah they go up like right to the edge of the screen for the most part i'm not sure why this padding didn't make any changes oh it's because we're using a background color here that makes sense so these would need to have like a margin and we want the margin to only be on the top and bottoms would be 0.250 there we go yeah i think that looks good and then instead of this background color let's do like an a of zero zero zero point five and that way they kind of get this like grayish looking color to them and i think we can change our placeholder images to have a color assigned to them by just saying like ff000 yeah so we can change it to maybe not red let's change it to green sure we'll change it to green on all of these there we go we can kind of see a little bit that we have this green section behind this gray section and if we offset by negative 100 again yeah we can see we have the green section behind the gray and maybe we do like 0.25 sure that should be fine uh it looks like it's over stepping the bounds a little bit of the actual container it's like a little bit wider than it should be um one way we can fix this is actually get rid of the width on our slider and we can change this to just a flex grow of one and our handle should be flex grow of zero and then what we want to do is we just want to have it so that you actually save that we can put this back to zero for now so now our handle flex grow zero yeah we can just give it a width of for example 5rem for now and there we go it'll show up at that exact size and let's put that negative 100 back in there it's still overstepping a little bit i believe it's because of this padding because this has padding at 0.25 rem so we would need to like subtract that and we could say like minus 0.25 rem um that doesn't seem to be doing anything for now i'm not going to worry about it because we're probably not even going to hard code this with what i'm probably going to do is just put this arrow icon inside of here and then i'm going to have the width be automatically calculated based on that arrow icon size so yeah we're going to have it this color and then we're going to say like handle hover and when we hover over top of what i want to do is i want to take the background color and make it darker we're going to change it to like 0.5 there we go i'm also going to give it a cursor of pointer so we can say like cursor pointer i should probably make these handles buttons to be honest so let's uh turn these into buttons because that's realistically what they are acting as there we go and then we can just say order done there we go i want to add a little bit of border radius of like 0.5 rem maybe we'll just do one rem okay and then i can say like handle left is that what i called it i call it left handle left handle border top left radius zero bottom left radius zero and i can do the same thing or the right side there we go that looks good we probably also want to make it so that our images have a border radius like 0.5 rem oops 0.5 rem and overflow hidden that didn't seem to do anything see what did i use one rem here what does this look like when rm 0.25 rem 0.75 rem sure we'll do one ram as well make it exactly the same don't even need the overvalue okay let's see so now we need to put the actual arrow inside of here so that should be pretty easy we can just say handle uh we'll do like left handle after hover content and in order to get the arrows i could probably just copy it straight from netflix see exactly what they're doing so we can just inspect this um [Music] okay so it's this b element there should be like a content property being set on it probably oh they're using like a font icon kind of thing that's annoying so we'll just search for like html arrow or i think it's called a chevron icon here we go and let's just kind of scroll through here until we find what we're looking for greater than sign here we go single pointing angle quotation mark maybe that's what we want we'll just copy that so we will take the css code which is this very bottom one right here we'll just set that as our content we also get the other one here i'll just comment it out for now so the left handle is going to have a 3 9 and the right handle is going to have the 3a there we go so now if we go back to here and we hover should hopefully show those up but it is not let me make sure that we change the color here to white we can put that inside of like a handle i think it was the after property that i used on hover color should be white let's see what's going on here why it's not actually showing anything up let's force the state of hover there we go and i want to get the after element oh it's probably because a button can't have before and after elements can they hmm i wonder if netflix even used a button let's see here they did not even use a button interesting interesting interesting and it looks like anytime they hover over the slider they make the handle shove not just when they're over the handle so we can we can implement that so we can just change this handle hover here anywhere we have handle hover we just want to change it to container hover and we want to get specifically the handle um make sure and only when we hover over the handle do we want it to get darker though so i guess that one was correct how we had it before so yep yep yep but whenever we hover the container then we want this section to show up so we can say container hover get the left handle container hover get the right handle that'll make the content at least show up a little bit unclear oh yeah it's because we're using buttons die so we just swap these i hate doing it as a div one way we could get around this is we could use the html code so we can just copy the html code here paste it into here for the right side left side so now those should show up there they are very small but we can increase the font size pretty easily we can just say handle font size 5rem much bigger text aligns center uh actually probably the best thing to do is display flex align items center justify content center color white and then line height zero i believe because the annoying thing about some of these font things is that they are just very not centered as you can see this is like not centered it looks like it's lower than it should be to be centered at least to my eyes that's what it looks like so let's uh go to justify and align line height when we do line height zero that's pushing it way up and then if we align our items in the center it's not quite centered but it's probably close enough do like 900 minus 0.1 i can't do a negative line height we'd like 0.1 that make it more or less centered see if i change it to one it doesn't actually look like line height is moving it at all yeah the line height is not changing anything it's not perfectly centered but it is close enough it probably won't matter and it allows us to use a button which is honestly more important for usability so there we go we're darkening it when we hover over it i think netflix was making the uh arrow a little bit bigger when you hover over it yeah so we can do that too that should be pretty easy we can just say handle hover transform scale 1.1 we just want to get the font though we don't actually want to scale the entire thing so we can just say instead font size 1.1 em okay actually so we'll just change it to six rem yeah that'll work i really don't like i like the scale approach so much better though trying to think way we can get around it by doing the scale without scaling the entire thing obviously this should be fine we can do transition 150 milliseconds font size ease in out and then we just need to make sure the width is essentially hard coded because that's the only thing i don't like about doing the font size as our scale so i'd much rather do the trans form here and then we could say transform scale 1.1 that just scales the entire thing ah which really sucks we would have to do like two elements we would need to have like the dot text and then inside the doc text we put the text and then we can say handle hover dot text scale and text transition there we go we'll just do that on this bottom one as well okay that looks like it's working and we can even make this 1.2 maybe make it a little bit bigger there we go and we can also do a transition on the background color nice that looks pretty much the same as the netflix one and they're actual buttons so now we can tab through them which i think is really important and because we can tap them we should probably change these selectors up just a bit so that they also have a focus state that works exactly the same so change this also to focus so now when i tab you can see that they have the same animation i like that okay i'm trying to think if there's anything else we need to do first of all we have two handle selectors for some reason we're gonna move this up into here we can get rid of our width we no longer need a hard coded width um do we need these margins anymore yeah we need the margins still point our font size all that stuff get rid of that but it looks pretty good we probably want to have a little bit of padding in the like uh xy direction so we can say padding 0.25 rem uh maybe let's see what one rm looks like so it'll be 0.5 rem just gives a little bit of space there we go because otherwise it was just too crunched up yeah i like this a little bit better so now what we can do let's see here we let's do this lighting real quick see if that still works that still works even though the green section like the slider section is wider than our green section that's still an issue that we need to take into account let's get rid of this padding see if that makes a difference it does not i believe it has to do with the padding trying to think yeah i believe it has to do with the padding of our container so like our slider here needs to have some padding on itself of 0.25 rem um that did not work we would need to have actually it would need to have negative we need to have a margin of negative 0.25 rem that didn't work either make sure it's only in the y direction okay there we go we need the margin to be 0.25 rem i don't know why padding didn't work weird either way so now what we've done is we've made these sections lined up and the reason i had to add this padding here is just to line up with the padding we had on our images and that made everything work okay so now let's make it so these left and right buttons just move the slider container position so we can come in here we can say like slider index is equal to zero and we can just say calculate our slider index times negative 100 so now we just need to increment this number by one at a time and each time we do that it'll slide our container so let's create a javascript file let's import that javascript file we can say script defer the load of that and we can just select our buttons so we can say con we can say document query selector we might as well make this generic so it'll work for actually document.event listener click i want to make this generic so it'll work if we have multiple containers on our page which we'll work on in just a little bit i want to say is if e dot target dot matches um dot handle or if e dot target dot closest of handle let's say we'll just call this the handle so the handle equals nothing by default and then yeah we'd have to do let right here and then if the target matches handle then our handle equals e.target otherwise uh let me see otherwise we want it to equal the closest thing there we go so so what this little bit of code is doing right here is it saying if handle not equal to null first it's saying hey if the current thing that we clicked on is our handle then make that our handle variable otherwise if we clicked within our handle then the parent of the thing we clicked on will be the handle that'll happen if we click on this chevron it'll say we clicked on the text element inside of our button when in reality we clicked inside of this button as a whole so that's kind of what that is for let me just fix this spacing there we go okay save that so now we go back to here so if our handle is not equal to null what we want to do is we want to run some code and that code is going to be either moving us to the left or to the right so let's just call it [Music] on handle click and we'll pass it in our handle function on handle click which takes in a handle if handled dot class list dot i think it includes dot left handle then we want to move our slider to the left let's get our slider first const slider equals handle dot query sol actually we want to get the closest container there we go and then we want a query selector the slider and this just is going to work no matter what so this is going to move up the chain so when we click on our button here it's going to move up to the nearest container and then it's going to look inside that container for the first slider it finds so once we find the slider now we have it and what we want to do is we can say slider dot style dot set property and we want to set the slider index we want to essentially just add one to it so we want to get the slider index const slider index equals there's called get property value i believe we just want to take our slider index first we want to parse this as an integer and we just want to add one actually we want to subtract one there we go otherwise if it's the right handle what we want to do is we want to add one let's see if that works clearly it does not so let's inspect our page two it's going on console class list includes is not a function um let's see maybe it's just called include nope that does not work if it's not include then it's probably contain so contain didn't work either okay no it did work so our code is running but nothing is happening let's inspect our slider our slider index is not being set to any value so slider.style.set property console.log slider let's see what we got going on here oh you know what this should not say dot left or dot right there we go now we move to the left move to the right looks like moving to the right is not working letter index not a number um slider index should be zero to start with let's see what this value returns to us so if we look at our console when we click left it is returning to us a blank nothingness oh it's because it should say slider index here there we go actually fix it left right right still not working slider index n a n let's just copy this paste it down see what value we get inspect console still printing out nothing slider index i believe that is what i called it in here slider index yeah exactly the same um let's make sure that we're doing this right style.getpropertyvalue yeah that should be able to get the slider index oh it's because we have to do get computed you know what i'm just gonna go to my blog i know i have an article on this uh what is it custom properties get computed property okay so it's called get computed style so we can say get computed style we pass it our slider and then we call get property value on it there we go just expand that a little bit now if we hit right okay it's working we can move right and left and if we just slap on a little transition for our transform transition maybe like 250 milliseconds oops ease in out on the transform property there we go it works exactly like netflix's does currently except for obviously moving backwards doesn't work and if we move too far forward that also does not work okay also we should probably fix our overflow our slider should have overflow hidden there we go oh actually we don't want to overflow hidden here we want to overflow hidden on our container there we go that way we can see the like preview of the next and previous value yeah that looks good okay i'm trying to think what is the next step because we have the simple portion working um make this a little bit wider again let's get the first we probably put a title on this because that's what they have on netflix so we can add a simple title so we have our container and we're going to have like we'll just call this row naming is not the best but let's go with it so now we have our row and that row is going to have let's say like an h3 which just says title and we're also going to have our like uh slider index or something so like progress r we'll call it i guess yeah that that works okay and we'll put these just inside of a div for now and this would just be called header there we go what we can do is we can be like we have our row header title and our progress bar so our row we probably don't really need to change anything about our header we want to have it be display flex justify content space between to give them as much space between them as possible we want our header also be the same size as our slider i think let's see how it works over here it's the same size as the slider so we think best way to do this because right now we're calculating the size of our slider dynamically based on this handle so we would probably want to just take our handle and hard code the size on instead so we can just say width is 5 rem that works almost exactly the same so instead we'll convert it to a variable we'll say handle size handle size 5 rem and then inside of our row or yeah a row we can say no no our header is going to have padding which is zero and handle size um looks like it's a little bit too much padding actually let's inspect this and see yeah interesting let's look at our container here and our handle has a width of 48.8 while our header padding is probably larger than that if we look at the computed here we can see the padding is actually 80. interesting why would the size be different um flux grow zero we don't want it to shrink either so we'll say flux shrinks zero that's probably what's causing our issue yeah there we go so now we can make our handle size a little bit more reasonable let's change it to like three or four looks good maybe maybe three four a little big there we go now we have our title showing up at the correct location it also needs to have let's just say this is going to be our image gap 25 rem because we use this variable also in a lot of places so right here is our image gap right here is our image gap here is our image gap and then lastly we want to have our image gap on our header so we want to take image gap plus that we actually need to multiply this by two whoops there's going to be a padding on both sides there we go that'll perfectly line up the left side of this with this and the right side of our progress bar with the right side over here font size on this i just want to be large again we'll say like 5 rem oh that's way too big 3 rem 2 rem margin zero and here we're gonna have a padding like point five rem one rem now let's say point five where i am looks pretty good okay and for the progress bar we're going to have a set number of segments in here which is going to be determined by the current size of our slider which is also kind of determined by our screen size for now we're not really worried about the screen size very much though what we could do is for our slider we could have another variable called like images per or like items per screen set it to four for now and then this width that we have right here is just going to be a calculation which is 100 divided by our items per screen so now we can say you know what we're going to show two things but we're going to show three things or we're going to show seven things and they're all just going to dynamically change size perfectly which is good so let's change it back to four for now maybe three okay there we go and we can change this inside of a media query so just as an example we'll say like at media max width 500 pixels now let's make it like a thousand pixels we take our slider and we can change that value which we called items what did we call it items per screen so we can take our items per screen we could for example change it to four here and now if we just inspect this go into this mode analyze that down and as we change our screen size to be smaller you can now see that there's four items and when it's larger it's three obviously we want to flop this so like this would be three and up here this value would be four so now as we shrink our screen now it's showing three items and as we shrink it more we can make it show more and less items so i think that's a really good idea for example when we got to this size screen we could change it to two items and so on so all you'd have to do is find your breakpoints to fill out the rest of these we're not going to go through that because it's kind of boring to do that so but that's how you would do it okay close that out but we are going to use this item value within our javascript i think to determine how many elements are inside of our progress bar so i don't think there's any easy way to do that inside of css we can't like dynamically change the number of elements shown so inside of our script we need to have some kind of event listener let's minimize both these on our window and this is going to be a resize event listener so whenever we resize we can recalculate the like progress bar essentially so for now i'll just say like recalculate progress r and let's kind of see what an example of a progress bar would look like we're going to say like progress item and then i'm just going to put like a couple of those and we'll just say that this one is the active one for now so let's style what our progress item looks like so we have a progress bar which we want to be a display of flex i think progress item is going to be a flex of 0 0 and 1 rem maybe height of 0.5 rem background color red just so we can see it we're gonna put a gap on here of like point five rem so let's make this a little bit bigger we'll change this to two maybe and we'll change this to one at point five yep that makes sense um why is there only two of them been shown that's kind of interesting like going off the screen like that progress bar [Music] so the progress let's see if we can change this to a flex of zero zero that doesn't make any difference flex zero plug shrink one interesting let me just kind of inspect and see what's going on a little bit confused so we have our title and then our progress bar section progress bar should be filling up more space like it definitely should be filling up like it's got room for more space clearly progress bar item it's got that flex 2rem get rid of the display flex on it for now maybe we need to set like a max width of 2rem min width 2rem okay it looks like the min width fixed it for us interesting so i thought the flex basis being set to 2rem would work just fine the main reason i'm doing display flux here so they can easily show up on one line and like i can easily send to them if need be but interesting so let's see how they styled these on the netflix side so they just have like a it looks like a partially transparent background that is white so we can say we'll make ours black i guess no we can make a white we can just change our body background color and our color to white hopefully that'll work there we go so now we just have black instead of white as our screen and now we can change this to be 255 to 55 255 0.5 and then the active one progress item active is just going to be like 0.75 maybe 0.9 there we go and now we can just change how we want these to be sized so i think i want them to be a little bit smaller and maybe make the gap between them a little bit smaller is that like what they look like on netflix the focus has on wider but shorter like that pretty much or like 1.5 there we go that's pretty close good enough for me so now we can change whichever one is active whenever we click the start like the left and right buttons and by default we just want the first one to be active and then when we click next we want to move the active one over we also need to calculate how many of these progress items we want to show because by default this is going to be blank so i want to create a function called calculate progress bar and i'm going to pass it in container and we're going to process it in the progress bar itself so we can say like progress bar dot what do we want to do we want to take the inner html set it to an empty string i'll just clear everything out then we can say like progress bar we want to get the [Music] child row and then we want to get the slider inside of that so closest row dot query selector slider and that is going to give us slider and we can say item count is slider.children.length that will give us the exact number of items and then we can get to the const items per screen which is going to be coming from our css so we can just say copy this paste it here we called this items or screen i believe that's what we called it um let me scroll up to the top here items per screen yeah so now we got the item count items per screen what we can do is we can get the progress bar item count which is just items per screen divided by item count and we want to get the ceiling of that there we go perfect now we can just loop so we can say four let i equal zero i is less than progress bar item count i plus plus const uh bar item equals reading element which is just a div going to add the class to it which is just progress bar item i believe progress item is what we called it oops progress item and then if it's the active one we will give it the active class so we also want to get the slider index i'm just going to copy this slider index so if i is equal to the slider index then bar item.classlist.ad active and finally progressbar.append bar item so now we should just be able to call this function so i can say like document.queryselector all the progress bars what i want to do is i want to loop through each one of them essentially i can say actually i don't need to do that i just say for each bar all that function so i can just say for each one of them call that function right there and let's see if it worked as we expected it to so we have one item inside of there i think i have something wrapped in an if that shouldn't be so our items per screen should be four slider in or the item count should be nine items per screen should be four nine divided by four should give us like two point something it should round up to three let's see console.log progress our item count let's see what that logs out 1 of course let's get our item count to see what that prints out that is printing out nine okay items per screen this should give us four or okay why then when we divide them do we get one items per screen oh i have this swapped it should be the item count divided by the items per screen there we go now we have three things on our progress bar and then all we need to do is when we click the buttons so when we change our slider what we want to do is we just want to change the active index for the progress bar so i think the best way to do that what we could do is we could say we want to get the progress r which is getting the closest row and i want to get the progress bar and then i say progress bar dot children of slider index dot class list remove active and then i can take the slider index -1 and add the classless active that should be all i need to do do that in both sections but this one will be a plus now let's see if i click that button there we go you can see that our slider value is moving up here perfect that is working as expected obviously we don't have the looping action done yet but that's for a later point so we have the progress bar done we probably want to center it so for our header align items center whoops center there we go looks a little bit better that way i think got our title there's not too terribly much left we want to make this a white background instead of a black background because we changed our background color um and then we want to do it where's the other place here it is there we go because i think that works how netflix's does or close enough at least it doesn't really matter if it's perfect but it works okay that's what we'll go with um let me think if there's anything else left that we need to implement now so we have the sliding besides obviously the looping i'm going to change it so we just have eight elements in our thing for now there we go that we have kind of like the perfect number to always work with maybe i'll make it to those 12. so i'm just going to copy these four i'm going to change the text so nine 10 11 12. there we go that way we can have like a middle page we have a beginning page and then we have our end page obviously okay so i think we're finally on to the looping portion which was the part i was looking forward to the least to be honest um okay because it could implement quite a lot of changes but i'm hoping not so when we are at the very end of our list let's think about that scenario first what i want to do is i just want to essentially copy my slider and add it back onto itself kind of trying to think of the best way to do this we have our slider i just want to like add these four elements to the end and then when i move i obviously want these four elements to be at the beginning hmm that's really tricky because i can like put another slider directly after this slider [Music] let's see how the netflix one does it if we go back it just keeps cycling left but it's seamless you know what is the best way to do this because like i said we could we could just like duplicate these four elements like if we're at the end we could duplicate the first four elements and put them back at the end and that's kind of going to emulate that idea you know you can see we hit next and it starts back over at the beginning but when we do that movement we would need to make it so that our gosh what is the best way to do this we almost need to make it so like our entire slider just like moves itself like it clones itself but it's hard to make it smoothly scroll because we could obviously make it so that when we click next here it just scrolls back to the very beginning and that's pretty easy to do so i'll kind of emulate that so we could say slider index we want to get the items per screen and item count here we want to get all this information i guess we could just use the progress bar for that so we can say like const progress our item count equals that dot children dot length and we can say um if progress bar item count so this item count be like three and if we're on index two so if it plus one is greater than or equal to our slider index then what we want to do is we want to just reset our slider index to zero we would just do this set this value to zero here and this to zero and then we put this inside of an else so now when we get to the very end okay i broke something progress bar item count plus one oh we want to get the active one not the we want to see if the slider index is greater than or equal to this there we go we want to do the plus one here so now we get to the very end it's just cycling back to the very beginning that is one easy way to do that we do the exact same thing up here so i can say like if the slider index is less than zero minus one then what i want to do copy this in there is slider index is i want to move it to my progress bar item count minus one yeah i think so now when i hit left yeah it moves to the very end that's definitely one really easy way to get around the issue and this is how i believe like other sites like amazon maybe does it like amazon prime i know a lot of other sites do it this way because like as you can see the code is way easier to implement it this way let's do this recalculating in the progress bar real quick and i'm actually going to go back to my blog here because i just wrote an article on throttling and debouncing which is perfect because we want to implement that for this resize event so it's not too slow so i'm just gonna do let's just do a throttle i guess yeah throttle should work fine okay so let's just copy over the function completely there we go and what i want to do is i want to say like consta throttled progress bar yeah equals throttle and we're going to pass it in here all we want to do is just this calculate the progress bar for each one of them i'll do like 250 millisecond delay we're going to call that function when we do the resize that's not quite all that we need to do though that's going to be part of it but we also need to no actually that should be all of it because the css takes care of the rest now if i just inspect my page uh change it into mobile mode now what should happen is as you can see we have three here when i decrease my screen size to three you can see this updates to four i do think i need to fix i guess i don't need to fix the slider index because that'll stay the same because when you're resizing your screen this could mess things up so like the slider index right now if we go to this page is on one like technically it's one we're on the second page so that means when i decrease my screen size we're still going to stay on the second page but the amount of videos we're showing on that page may change i think that is a fine implementation so as you can see this progress bar is perfectly updated and if we change our css to include another breakpoint at like let's say 500 pixels where we change this to two we decrease this far enough you can now see again our slider has changed up here and we can move around now this will break when we try to increase our screen beyond the maximum so what i want to do is i want to have uh in here i essentially want to like cap out our slider index at a specific value so let me think so we have our progress bar item count that's the number of progress bars so if slider index is greater than our progress bar item count then i want to set our slider index by saying slider dot style dot set property slider index to our progress bar item count minus one this should be greater than or equal to yeah that should work and we can say like slider index is equal to that make this a let let's see if that works so move to the very end here decrease the size move all the way to the end and if i increase the size as you can see it's moving back to the proper slider index increase the size again and again it's moving me back to the very end of the list if i'm past the end of the list but obviously when i'm shrinking things don't make a difference and if i'm at the beginning for example and i increase again it doesn't make a difference it only makes a difference if i'm at the end of the list and by decreasing or increasing my size i'm sorry i now change it so that i no longer have that page i only have three pages now instead of four so if i was on the fourth page move me to the third page there we go that works perfectly so i just paused the video here to look at the time and it looks like we're pretty much right at an hour for the video so instead of trying to scratch my head even further to implement the like wrap around feature that's they have here in netflix i think we're going to keep it with what we have because we've implemented essentially the same functionality it just works in a very ever so slightly different way but in my opinion it's still just as good of a feature now if you enjoyed that you're definitely going to love my multi-step live solve video that's linked over here and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 132,320

Keywords: webdevsimplified, netflix ui, netflix js, netflix clone, netflix javascript, netflix js clone, netflix css, netflix css clone, netflix ui clone, netflix slider, netflix css carousel

Id: yq4BeRtUHbk

Length: 61min 10sec (3670 seconds)

Published: Tue Apr 12 2022