jQuery Image Slider - Quick & Easy

hey what's going on guys welcome to another short short project video in this video we're going to create a simple slider component with jQuery okay now this is going to be really easy because I want this to be a really quick video much like the JavaScript one I did basically we have a slider here and we have some arrow box button and we can just navigate through the images here we can also go back so it's going to be very simple and it's meant to be very simple so let's go ahead and get started now I have a folder called JQ slider with an images folder and inside there we have the arrow images as well as four images here I'm going to put a link in the description for you guys to download those all right so let's go ahead and start to create our files I'm going to create a file here called index dot HTML okay and then we're going to also create a new folder called JX and inside there we're going to create a new file and we're going to call that main dot Jo okay then I'm going to create a CSS folder and let's create a file here called style dot CSS okay so that's all the files and folders we need you can see I have atom open of course you can use whatever text editor you want and we're going to open up index.html and let's just put in our basic tags here so we're using html5 so we're just going to use the HTML doctype and then we'll open up our HTML tags we're going to have a head and inside the head let's put a title and we'll just say Jake use slider okay and then we want to link our CSS file and let's say CSS slash style dot CSS and we also want to bring in jQuery so I'm going to go to code jQuery comm and you just want to click on one of these we're going to use three point one point one and we'll just grab this script tag here and paste it in right there okay then of course we need to include our own script so that's going to be jf / name jf and that should be it for the head area okay so now let's create our body tags and this is going to be very minimal and I want I want it that way you guys can add on to it if you want so we're going to have div here wrapping around everything and we're going to give it a class of container okay and then inside there let's put an h1 will say JQ slider and then we're going to put a div with a class of slider outer okay so this is the outer good and in here basically we're going to have our arrow images and then the you know the main image is in between so let's do the arrow left so source is going to be images slash and what do they call it arrow left dot PNG and we're also going to give this a clap of fries and also an alt tag of fries with a capital T all right and then let's put the give here this will be the slider inner div that can change with four images and you can add more if you want and we'll do that in a second but down here let's put the right arrow so I'm just going to copy that paste that in let's change this to right and let's change this to next and change this to next okay so now we want to put the rest of our images so let's say image source I'm going to put this on images slash image one dot jpg okay now this is the initial image that's going to show when we enter the script so we want to give this a class with active all right and then let's give it actually that's it okay and how this slide is going to work is that each time we change it when we click the arrow button it's going to move the clap the active class to the next image and also change the z-index so let's go ahead and put in the rest of the images here without the active class so image two dot jpg and I'll just copy this and if you want to add more images that's fine scalable and that's it for the HTML so let's open this up and see what it looks like so far okay so that's what it should look like not too pretty but you know we need to add our CSS so let's do that now so we'll go to our style and just going to paste each style in one by one instead of typing it just to save some time so the body we have Arial 14 pixels color white and the background is going to be a doc gray all right then we have the links which will be white with no decoration the one h1 we have I want to align it to the center okay the container which wraps around everything is going to be 540 pixels and it's going to have a 40 pixel top and bottom margin and an auto left and right and then also an auto overflow okay next we have the slider inner class which you want to set to the same height and width as your images using bigger images make sure that you adjust this okay and that's going to be positioned relative hidden overflow float:left padding:0 4px play none so basically we want them we want them all hidden at first okay and then we're also studying the width and the height to the actual image size okay now what we're doing here is taking the image that has the active class and we're going to show it and we're displaying it as an inline block okay so we're initially hiding everything with the hell is it is it already I've display:none we're initially hiding everything and then we're going to show just the active image now for the previous and next we want them both to float left we want to give them a margin top we also want to make sure that the most change tool changes to a pointer when it hovers over them and then we're going to take just the previous and we're going to set the margin right to negative 45 also the z-index to a hundred because it should always be on top okay if you don't know what the index is if you have two elements in the same spot the higher the index the higher the priority is on showing it if you have a lower in the index it'll it'll go under that element okay and then for next we're doing the same thing we're just setting margin left instead of margin right so let's save that and reload and it gives us our slider just no functionality if I click this nothing happens so that's where jQuery comes in so let's open up our main j/s and this is going to be pretty simple so basically we're using jQuery so we need to make sure that the document is ready so document dot ready and then what's when it is it'll run a function all right now what we want to do is grab on to the next class which is this arrow button and we want to add a click event okay so let's do dot next and we're going to say you could do dot click but I'm going to say dot on and then put click in here okay so on a click this function will run for just to test that out with say console.log and I'll just say click OK will reload open up the browser console with f12 and if I click that down here we get clicked so we know that that file is connected and working so now we're going to create a variable for the current image and a variable for the next image ok so far current I am g equals and of course that's the one that has the active class initially and then we'll create a variable for next image and let's set that to the current image current image dot next which will grab the next element okay that's a jQuery function then what we want to do is test to see if there is a next so we can say if next image dot length ok but you know greater than zero then we want to remove the active class from this image and put it on to the next one so we'll say current current IMG dot 3 means class and we want to remove the active class ok and then we also want to change the Z index so that we put it on top okay so for that we'll just use what 26.2 SS and that allows us to change any kind of style we want for that element and we're going to save we're going to set the index to negative 10 to put it underneath and then we're going to take the next image and we're going to call add class and we're going to add active and then we'll also change the z-index now we're going to change that to positive 10 so that's going to put the next one on top okay so very very simple logic we'll save that reload and now we can switch we can go forward we can't go backwards we haven't done that yet so to do that it's going to be very very similar to this so I'm just going to copy it and we're going to change next to priests and let's say you're going to current image active and then Creve image pre image we're going to set to current image dot pre which is a jQuery function okay and then we're going to test for it see if there is a previous image and then we're going to remove the claps from the current image just like we did before and then add the class to the previous image and that should do it so let's save and reload we can go forward we can also go backwards alright so that's it for very very simple I I'm going to leave it open for you guys to add the functionality where it gets to the end and then it cycles over again so this will kind of give you some homework so try and figure that out and hopefully you enjoyed this and that's it I will see you in the next video

Channel: Traversy Media

Views: 102,404

Keywords: jquery, jquery slider, jquery image slider, jquery slideshow, jquery app, javascript jquery, javascript slider

Id: J2HLW4A40X8

Length: 12min 14sec (734 seconds)

Published: Fri Mar 03 2017