jQuery Tutorial #6 - Building a jQuery Image Slider

Key Takeaways

all right today we're going to be building a basic jQuery slider an image slider now there's a lot of great jQuery plugins out for there for this Flex slider royal slider all sorts of good ones they have more features than we're going to be able to build in a couple minutes uh but we're learning jQuery so this is a great example let's get into it um I have a slider here let me show you the HTML behind it I have a wrapper div with the ID of slider and then I have UL class slides and then I have a bunch of Lis that have a class of slide um each one of these has just an image that I've put in there slider 1 2 3 4 5 and then I finished it with my first one as well they're going to be sliding to the left and I want the first one to be able to slide onto the screen at the very end we'll see what that means in a minute so here's the CSS driving it the slider wrapper has a width of 720 and any overflow is hidden and then all the slides are going left to right all the way out so the slides UL has a width of 6,000 pixels um and then all the slides float left so basically what you're seeing here is I can show you is if I were to make the margin left 100 pixels there you go so as the UL the uh the UL slides to the left with a a negative margin it's going to move there until we run out of slides and so basically all our JavaScript needs to do is move this U L back and forth um so that's the basics oh yeah and then when it gets to the end here let me go back up here when it gets to the end we need to somehow know that we are on the last slide and then boom go to margin zero uh and the user won't even notice it because it's the exact same slide so we need to go back to margin zero when we hit the last slide so let's get into the code uh one piece of code you'll need to know in JavaScript that if you don't know how to do it yet is set interval set interval takes two things it takes a function and then it takes a time frame like let's say a th000 milliseconds which is 1 second and every th000 milliseconds it will fire this function so as an example I can do this I can go every th000 milliseconds we're going to log the date new date there you go and so you'll notice here in the console it's going to log the new date going up one second every time another thing you can do with set interval is you can save its value my interval equals that interval so now if I save that it's going to start over again um and now I can go clear interval my interval give it the one you want to clear and it stops it so that's kind of we don't want it to automatically run forever we want to have the ability to start it and stop it so we're going to save our interval and then we need to use jQuery to animate this slider and how you do that is you do I'll show you over here you do jQuery selector do animate and then you're going to give it an object which is all the CSS properties and what you want to animate them to you can animate more than one thing at a time but in our case we're just doing margin left uh a time frame again like how many milliseconds and then a call back uh which is if you want it to do something after the animation is complete the Callback function will be there so we can just go slider slides animate margin left to let's make it 720 and then I'll give it let's do that over the course of one second there you go so now it just went to my second slide I can also do negative if I make it a string I can go negative equals 720 and it's not going to go to 720 it's going to keep minusing 720 every time I run that so that's going to keep minusing 720 keep minusing 720 um or I can just actually go to minus 720 which is slide number two if that made sense so let's go ahead and build out this uh thing here we're going to start by wrapping it in a jQuery document ready function which is what we always do and I also always like to start off with comments to set the stage for what I'm going to be building set interval is what I'm going to build here and in that interval I'm going to animate margin left and then I'm also going to if it's last slide go to position one which is zero pixels um and then I also want to add another feature I want to listen for Mouse enter and pause so if you hover over the slider I want it to pause and you know while I'm looking at that slide and then resume on Mouse leave so when I leave I want it to start sliding again so that's basically what my slider is going to be let's start building this out set interval and let's make it run every 3 seconds and every 3 seconds I'm going to go slider slider slides. animate just what I showed you before margin left is going to go negative 7 no negative equals 720 pixels because I don't just want to go toga 720 pixels I want to keep subtracting 720 every time and let's slide for about 1 second when we do that there we go let's actually save refresh and now we should be sliding every 3 seconds yeah over the course of a second feels good feels good but this is just going to keep going forever once we get to slide seven it doesn't know you're there it just keeps sliding so now we need to get a little bit smarter if it's the last slide go to position one uh one thing I'm going to do here here is I'm going to start I don't like that all these configuration options are kind of scattered throughout the code that's kind of a bad idea so I'm going to start moving things up here I'm going to go width equals 720 which is the width of our slides which is set in the CSS it's 720 the the slides are all 720 um I'm going to go there animations speed equals 1,000 and then ver pause equal 3,000 so now I'm going to make this pause there we go animation speed and U I will just go - 720 plus width so that basically is the same as saying negative equals 720 except for now I'm just storing my 720 here so if if at any point time I want to change the configuration it's all in one place you'll notice the colors are starting to look a little different now all my yellows are up here um and there's not very many yellow down here that's a good sign that means all my configuration all the things of the same type tend to be in the same place not all code ends up looking this way but this is definitely a good side um another thing I want to do too uh save configuration is I want to do what's called caching the Dom I think I've covered this in some other videos uh but I don't want to have to look for slider slides every time I want to be able to look for it once and then just reference it every time so I'm actually going to go ver slider there we go so I searched the Dom and I found my slider I'm using the dollar sign here so I know it's a jQuery object um You can call it just slider um but I want to know that that's not a string or something I want to remember that that's a jQuery search so there we go slider equals that and now I can reference it later on so now every single time the interval fires I don't have to look for my slider uh except for I'm not actually animating the slider I'm animating the slide container so let's get that slide container equals um and what I'm going to do is I'm going to go slider. find slides so I'm going to I've already searched all my web page document and I found this guy and I've kept a track of it and now I just want to find a guy inside of it so I'm going to find slides inside that's a very fast operation um so now once again you're noticing I've only done my jQuery selector once so this is going to be a very fast and high performance piece of code um and then I want to go let's go slides as well equals um slide container yeah that's right find slide so that's going to be the whole list of my slide elements so this is actually slide container did I not spell that right nope I didn't container there you go I'm just going to copy paste that it's annoying to type that while I'm talking okay so there we go so just again to cover what I did here is I only searched my whole HTML web page once right there um and from there on I'm looking inside that piece that I found to find some specific things I will reference later so now every time it has to do the animation it just goes boom I already know where that is I'm going to find it and animate it it's a much faster piece of code so now what I need to do is I need to start checking afterwards to see if I'm on my Cur if I'm on the last slide or not um what I will do here is I'm going to add a callback remember I said the third thing you can pass to animate is a call back so once the animation is done I want to check if I'm on the last slide if I am on the last slide I go to the first slide so if um and I'm going to do this I'm going to let's do this let's go Plus+ or current slide wait I didn't save current slide here current slide equals one I always want to start on slide one so I'm going to go current slide plus plus so I'm boosting that up so the first time it's going to turn it to two then three then four every time I plus plus that it's just going to go up one number if current slide equals slides. length so if current slide is if we're on the last one current slide will be 1 2 3 4 5 6 and then if that is the same as my length uh which is the count so if I can show you that there's slide if I do slide. length then it's going to be six there are six slide elements on my page so if current slide is the same as slide length then we want to make current slide equals one we want to make sure that goes back to one and then we're going to go slide container um just CSS we're not going to animate this time we want it to happen immediately and we want it to happen behind the scenes we want to make the margin left zero okay so every time we animate we bump up our number of our current slide if it now equals our slide's length uh then we're going to go back to number one that should work let's check it out and I'm going to set our pause to 1 second so this should happen faster uhoh slide contain coner is not fine right because I can't spell here we go slide container slide caner is still not found what the heck cannot type yep there we go all right so here we go we're sliding through every one second and then we should know here nice okay so once we got to the last one we realized that we were on the last one and we set this back to one and then we went to margin left zero great and that's going to get really annoying for it to move that fast so now all we have to do is add this we've taken these three out check check check let's just do that Mouse enter in that pause part and we're done with our slider uh this is actually going to be a little trickier than we think so let's go here slide container actually we're just going to do slider slider Doon Mouse enter we're going to pause slider and then dot on Mouse leave we're going to resume slider or start slider okay now the thing is is we actually don't have a way of pausing our slider right now so what we need to do is let's actually make an interval this will be our thing that we start and stop and let's make a function for start slider and a function for stop slider so now I'm going to put this set interval with in my start slider function interval equals interval okay so now um whenever I click Start slider it's going to store my interval in this guy um I had to Define this outside of my function because if I did ver interval in here instead I can't access that interval anywhere outside of the function it's kind of within What's called the scope interval only exists within this function so now I can't talk to it from outside so what I had to do is I had to define interval here and now I can ref interval is talking to that guy so I can start slider and then function stop slider is easy stop slider is just going to clear the interval and that's why I had to define interval outside of my function because I have to be able to clear it um and I can show you in a little bit why that wouldn't work the other way so now we go I have my oh I called it pause slider didn't it well we're going to call this pause slider then I'll just call it stop so now when I Mouse enter over slider it's going to stop it and I Mouse leave it's going to start it um and guess what when I hit when I stop it and it refreshes uh when I save it and it refreshes nothing happens because start slider is never being called so I need to at the very end of all things just start my slider now it should work great so it slide in excellent now if I hover it should stop sliding of course I'll probably need to click on this okay if I hover there you go it stopped and now if I Mouse leave of course I just called it moose leave okay let's try this again it's paused let's pause it make sure it's paused it is paused let's hover and it should start up again excellent so let's just one once again cover what we did to make sure it's not super confusing um and I'm going to just I don't know what I'm going to do with you I'm going to just comment you out so that thing doesn't slide all day all right so we made a function start slider stop slider so that way we could say on Mouse enter we're going to stop slider on Mouse leave we're going to start slider um and then we Define this interval thing here let me go um just for your learning about JavaScript if we did interval here we just made interval a new variable but it's only going to stay within my function so stop slider will not work because when I hit clear interval it's not going to know where to find interval a function only has access to the varibles inside of it and the variables up one level which are all these guys it's not going to have a it's not going to have access to variables defined inside of another function here let me show you this in operation right here so I'm going to save and and I'm going to hover interval is not defined it says because it doesn't know what to do so when I try to stop the slider it can't find interval um and so there's your problem so we're just going to go ver interval we're just going to Define it and not give it any kind of value whatsoever and now everybody else can talk to it we can put values into it and we can mess with the values that are there so there you go that's how to build a jQuery slider um hope it made sense feel free to watch it again drop me some comments if there are things that don't make sense have yourself a great day