Full Screen Image Slider With HTML, CSS & JS

[Music] hey what's going on guys so tonight it's Sunday night and I wanted to do a video but I wanted to do something really simple and quick and useful so we're gonna build a full-screen image slider and I've been asked to do this a few times because I did the the full-screen landing page tutorial then I did the fullscreen video background and I was asked a few times to do a full-screen image slider so that's what we're gonna do we're not going to be using jQuery or anything it's going to be straight JavaScript we're also not going to use an e like advanced CSS transitions or anything or animations basically we'll just click on the arrow and it's just gonna switch the image all right so you can see it takes up the whole screen we have three images here we can go forward and backward and if I resize the browser the the image is always going to be fullscreen all right so hopefully you guys enjoy this something simple it's a Sunday night just you know relaxing and wanted to make a video so let's get started coding dojo is a programming school that turns beginners into developers in only 14 weeks over 90% of their grads land jobs within three months of graduating often making over 70 K per year to learn more visit coding dojo com or click the link in the description below alright guys so I have vs code open on the left here and my browser on the right we have the finished product here first thing I'm going to do is download the images now the images I got from pixels dot-com which is a fantastic resource for free stock images you can see the images that I use they're actually on the home page here trending so what we're gonna do is is click on this one here and of course you can use any image you don't have to use these and I'm gonna grab the nineteen twenty by twelve eighty version and download all right now I have a folder right here open in vs code called fullscreen slider that's we're gonna we're going to put our application so I'm going to navigate to that I have that in my code production folder and I'm going to just create a folder called images I don't know what's up with my os here doing this there we go we're gonna call this images and let's save it as an easier name we'll save it as image one dot jpg all right so that's image one I believe image two is down here yeah this one right here is what I want so I'm going to just grab the nineteen twenty by twelve eighty one whoops what happened I got a click download' alright so we'll save this one as image to jpg and then for the last one where the hell is the last one this one right here alright so same size nine - this one's nineteen twenty by twelve eighty will download this is gonna be image three dot jpg and now we have those out of the way at least we have those downloaded so let's go ahead and create our files here we're just going to need outside of the image folder we're gonna need index dot HTML and we're also going to need a CSS file called style dot CSS or whatever you want to call it alright so we'll start off with the HTML which is going to be pretty easy I'm using Emmet so I'm going to do exclamation and then tab and that's going to give us a basic HTML layout for the title will just say full fullscreen slider and we're gonna link our CSS files so it's a link rel stylesheet' href is going to be style dot CSS alright so I'm gonna save this now I'm using a an extension called live server for vyas code if you want to use that you can click on the little extension icon here and just search for it and just go ahead and click the green install button and if you do that you'll be able to just open up HTML files on your localhost and you can do that by just right-clicking and saying open with live server alright so this is our application here alright so let's go out into the body and this is gonna be pretty easy we just pull sup real quick alright so we're just going to create a div with the class of rap to go around everything and inside here we're gonna have basically our right and left arrows and then all of the slides okay we have three different images or three different slides so let's create the left arrow so I'm going to create a class actually this is going to be an ID of arrow - left we're also going to give it a class of arrow okay and then we'll go ahead and we'll copy that and we'll put one down here and we'll call this one arrow right alright and then all of our slides are going to go in the middle so in the middle here we're going to create an ID of slider that's gonna wrap around everything and then we're gonna have three different slide classes so we'll say slide and then I'm also going to give this a class of slide one because we need a target for the images alright so slide 1 and then in here we're gonna have a class of slide content and then a span alright and this is this is where the text will go so for the text I'm just gonna say image will just say image 1 alright and then what we're gonna do is just copy the slide div okay so we'll copy what I do here let's just copy that and I'll go ahead and paste it in twice the second one we're going to change to slide 2 we'll change the text to image 2 and then this one will be slide 3 and we'll change the text to image 3 all right and that's it for the for the HTML so let's save this and it should look like this all right we haven't linked any images yet we're going to do that inside of our CSS so let's let's go to our style sheet and we're gonna start off with the body styles okay so this is gonna be the body the slider ID the wrap and the slide content all right so also all these styles are gonna apply to these elements here so I'm going to just margin I'm gonna zero out the margin and the padding all right we're gonna set the font family to let's say arial helvetica sans-serif we're gonna set the width to 100% and then we're gonna set the height to 100 VH or viewport heights and if you don't know what viewport Heights is you can basically think of the height of the browser no matter how no matter how its resized as 100 slices across okay so we're saying that we want this to take up the entire thing all 100 slices if we were to do you know 50 VH that would take up 50 of the 100 slices so that's that's the best way I can describe VH and then we also have VW which you can think of going the other way all right we're also gonna set the overflow - X here - hidden because you don't want any horizontal scroll bars I'm just gonna space these out here all right so those are basically the the core styles of a base styles the rap class all I want to do for that is just position it relative so we'll say position relative and then we want to start to add the slide so we have a slide class and then we have the slide 1 to 3 which is where we're going to put our background images so let's slide out let's let start out with slide and we're gonna set this to fill this up here we're going to set the background let's say background size is gonna be cover and let's say background background position background position is gonna be Center and then let's set the space here let's set the background repeat' to no repeat all right and then we're gonna style each slide 1 slide 2 and slide 3 individually so let's say slide 1 and in here we're just gonna say background image and we want to set that to a URL and inside the URL we want to put images that's the folder it's in and then it's called image 1 dot jpg ok and then we'll go ahead and we'll copy this and let's paste it in two more times and we'll change this one to slide 2 and slide 3 we'll change this to image to an image 3 and let's go ahead and save that and it should show the images ok so they're all going to be piled on top of each other now it's gonna be like that until we get to our JavaScript and we start hiding images and showing the you know showing one at a time so now we're gonna do the slide content which you can see is way up here it's black you can barely see it it says image one image 2 and image 3 so we want to take care of that so that has a class of slide content so for slide content I'm actually going to display as flex and we'll set the Flex direction so instead of a row I want it to go vertical so it's going to be a column and then we just want to align everything to the center so we're gonna say justify content to the center we're gonna do align items aligned items to the center and let's do text aligned to the center all right so we'll go ahead and save that now you can see that the words are now in the center we need to obviously make those a lot bigger and change the color for that we're gonna target the span that's in the slide content so we'll say slide content span all right so let's say font size we're gonna set that to 5 REM so REM is a relative unit basically we're saying that we want it to be 5 times the the the font size of the core HTML element or the root element which by default is 16 pixels all right if you want to learn more about REM and M units I just did a video probably about two weeks ago on it if you want to check that out all right and then we're just going to set the color to white all right so let's go ahead and save that and now you can see the words are in the middle and they're big and white so next thing we want to do is the arrows so the arrows are actually gonna they're going to be pure CSS we're gonna do it using boy border a border with and borer color so let's first do the arrow class remember we have the arrow class on both and then we also have an ID of left arrow or our left and arrow right so for the arrow class we're gonna set first of all let's do the cursor so we'll set the cursor to a pointer when we hover over it and then we're gonna set the position to absolute we're gonna set from the top 50% because basically we wanted to it's going to start up here we want to go down 50% from the top and it's going to be a little too low after we create the size from the border so we're gonna have to bring it up a little bit so what we'll do is we'll set the margin top to let's say negative 50 pixels all right and then we're gonna set the width to zero and the height to zero because basically we're just working with the border all right and we're gonna have a border style of solid all right and when I say working with the border this is this is how we can actually create triangles with CSS or arrows whatever you want to call them so let's add the ID of arrow left alright and in here we're gonna set the border width and it's going to be top right bottom left so top will be 30 pixels right will be 40 top right bottom will be 30 and left will be zero okay and then we want to add actually we'll do this after let's do from the top I mean I'm sorry from the left zero okay because this is the left arrow so we want it zero from the left so it's gonna stay over here now I don't want it right at the edge so I want to push it over a little so what we'll do is we'll add a margin left of let's do 30 pixels okay so if I go ahead and I save this you'll see we just get this black box okay so this is just going by all these border widths kind of mushed together so the key to make this an actual arrow is with the border color and setting everything to transparent except for the right all right so it's top right bottom left so we're gonna say transparent for the top white for oops white for the right and then transparent for the bottom and transparent for the left and if we save that there we go we get an arrow now it's right now we can scroll we're not going to be able to do this when we get to our JavaScript because we're only going to display one image at a time so don't worry about that so let's see what else you want to do here then it looks a little high you know what let's do margin top right here let's do negative 30 that'll move it down a little kind of align it with the text yeah actually we'll do 35 there we go all right so now we want to do the same thing with the right arrow except it's gonna have some different values so let's copy that so we'll call this arrow right and then for the border width what we want to do is just set the second one which is the right to zero all right we want the top to be 30 0 30 and then 40 pixels on the left and then as far as the border color goes we want the white to be on the on the left as well so this will be transparent and then the last one which is the left will be white okay and then we obviously don't want this over here we want it on this side so we're gonna say from the right we want it to be zero and then we want to push it over a little so it's not right at the edge and that's gonna be a margin right of 30 pixels okay so let's try that out we'll save it and there we go so now we have our arrows all right so now what I want to do is start to add our JavaScript so we're gonna go to our HTML file go down to the bottom here and let's put in our script tags all right so first thing we'll do is create some variables we're gonna have one called slide our images and we want to set this to document dot query selector all alright because what we're doing is we're selecting all the elements that have the class of slide okay which is going to be these three right here so we want to represent those and query select are all is what you want to use if there's more than one it's basically going to return an HTML collection which is kind of like an array we can select each element as we would an array with an index all right so the next set of variables we want to for the arrows so we'll say arrow right and we'll set that to document dot query selector not query selector all because there's only one so this is gonna be the ID of arrow - left all right and then put a comma here and you could just as well put a semicolon and just to you know keep saying let but I'm just gonna do it all in one shot then we want arrow right I'm sorry arrow I put arrow right there that should be left and then we'll do arrow right so I'll copy this and change this to right change this to right and then the last variable that we want is going to be called current and this is going to represent what image were on or what slide we're on it's going to be 0 by default okay so those are our variables now what we want to do is I'm going to create a function here called reset because each time we change the slide we want to basically clear out all the images set them all to display:none so we're gonna call this reset function before every you know slide left slide right so to do that we're going to loop through the collection of slides so let's do a simple for loop we'll say let a equal 0 we're gonna say as long as I is less than slide our images slide our images dot length and then we just want to increment I by 1 so I plus plus and then we're just gonna do let's say we're gonna do here we're gonna say slide our images the current iteration so I and we're gonna set the style dot display so we're taking the display and we're gonna set it to none okay so we're basically just hiding all hiding everything so let's go ahead and save that now if when we reload the images are still going to be there because all we did is define the function now what we're going to do let me just put a comment saying what this does actually so this will clear all images and then we're gonna create a function called start slide which is basically our initializer okay but before we do anything we want to call reset okay and then just to show you down here we'll go ahead and run whoops we want to run start slide so let's save that and that's gonna clear all the images out now the goal now what we want to do is just show the first image now we can grab on to the first image with slider images and then we want to use the zero index okay so it's basically like an array we can access the first image with zero second one with one the third one with two and so on and it's scalable so as we add we can add more images and we won't have to tweak the JavaScript all right so we're gonna say dot style dot display and we're gonna set it to block so that it shows so let's go ahead and save that and now you'll see it shows the first image so let's go ahead and let's put a comment here this basically initializes the slider and then we want to add our functionality to slide left and slide right so let's go under the start slide function and let's start with the we'll do the show previous which will be slide left okay if we click the left arrow so we'll say function slide left okay and then what we want to do here is first of all call reset because we want to wipe the slate clean and then we're gonna say slider images and then for the index we want to take the current whatever isn't that whatever the current image is and we want to take away one from it so if we're on the second image image - which has an index of one because remember the array or that the collection is zero based so the second image is going to have an index of one if we click the left we're going to want the index to go to zero which is you know 1-1 okay it's going to be zero and then we want to set that to show so we're gonna say style style dot display equals block okay and then we want to take the current value and we want to just decrease it by one so we're gonna say current - - all right now to test this out of course we're gonna need an event to run this right now we just define the function so what we'll do is create an event listener let's say left arrow click and we're gonna grab the left arrow so remember we gave that a variable of arrow left and we're gonna say dot add event listener and we're gonna listen for a click event and once it's clicked it's gonna call this function okay and then in this function what we want to do before we actually call slide left we want to check to see if it's at zero all right because we have a special condition if it's at zero so let's say if I will say if current is equal to zero then what do we want to do we want to basically set current equal to the total number of slides which we can get with slider images dot length all right now if this confuses you what we're doing right here basically if we're at zero that means we're on the first image that has a zero index so if we click the back button we want it to go to the third image or the last image which in this case is going to be the second index so we're setting the current to this to the max number of images in this case is three all right and then when we click slide left which is what we're gonna do next sorry for the bang and my wife and kids just got home when we click slide left current is now going to be three right because we're setting it to the max the or the slider images length width which is three and then this is going to be three minus one which will be the index of two which is the last image okay the index of two is the third image so when we click the back button it's going to go to the third image which is exactly what we want it should go to the last image in the in the in the array or the collection so that's what's happening here I know that may it might be a little confusing alright so now we're gonna do is handle the right arrow so what I'll do is copy the slide left actually I'm not gonna copy it I'll just type it in so this is gonna be show next show next and then we're gonna say function slide right alright so for slide right just check this out real quick we're first gonna reset okay we're gonna wipe the images clean then we're going to take slider images and we're good this is going to work a little different we're going to take current and we want to add one to it instead of takeaway because we're moving to the next image all right and then we'll set the style dot display equals block sorry that's a lot of banging up there and then we want to increase we want to increment current by one so we'll say current plus plus all right now for the event listener for the right arrow I'm just going to copy this and it'll paste that in so this is gonna be the right arrow click so we're gonna change this right here to arrow right event listener click now for the if statement we're going to do something a little different we want to see if the current is equal to them to two slider images length so slider images length take away one okay so if that's true then we want to set current equal to negative one all right because when we get to the last image we want it to go go back to the the first image all right and then we're gonna call slide right I probably should have tested the left one first but whatever we'll just test them at the same time so let's go ahead and save that let's let's click on the left one goes back to image three two one it just keeps going let's click the right one goes to two three and it just restarts so it's working exactly how we want it to all right so that's gonna be it guys I'm gonna stop because they're making a ton of noise up there hopefully you liked this tutorial and if you did leave a like and if you like this channel and you're not subscribed please go ahead and do so and I will see you next time thanks guys coding dojo is a programming school that turns beginners into developers in only 14 weeks if you're serious about landing a career in tech black the formal education or background coding dojo will get you there in no time with over 3,000 graduates to date over 90% of their grads land jobs within three months of graduating often making over seventy K per year at tech firms of all sizes from companies like Google to local startups to learn more visit coding dojo com or click the link in the description below

Channel: Traversy Media

Views: 293,168

Keywords: full screen image slider, fullscreen image slider, javascript, html, css, javascript image slider, javascript slider, css image slider, html css

Id: 7ZO2RTMNSAY

Length: 27min 25sec (1645 seconds)

Published: Mon Oct 23 2017