4.4 Placing the Slides

Hello and welcome back. In this lesson we're gonna take all of the set up that we've done in the last video and we're going to use these values that we've created to position our slides where we want them to be initially when the page loads. So we can start by opening up the starting code pane once you get that open up. We'll click on the fork button to create a new copy. And again, we can see all of the values that we've already set up. And now I want to use those values to again place our slides where they need to be initially. So I'm gonna create a function and I wanna call that function setUpSlides. And inside this function, we'll go ahead and set everything where it needs to be. So I'm gonna start by just taking all of our slides and placing them down here at the bottom in our down position that we've talked about. And then once we moved everything down, then we'll take the previous active and next slides and put them in place. So inside our setUpSlides method, I'm going to point to TweenMax and we're gonna use the set method to set our properties in place where we want them to be. So initially, we're going to set up all of our slides which again are contained in this slides variable. Remember, we used jQuery to point to the slide class and then use the toArray method to put all of those slides in an array. So here we're going to be setting all of the array elements to a certain value. So after slides, we're gonna type comma space and then a set of opening and closing curly braces. Inside those curly braces, I'm going to set the top property of all of our slides. So we'll type top colon space and then the value we want to give them which we can access. Again, we're gonna use this down position here. We're gonna point to the positions variable .DOWN, with all capital letters and then a semi-colon at the end of that statement. Now remember this function is not going to run until we call it, so we still see all of our slides right here. But if we skip a couple lines and then call the setUpSlides method. Semi-colon at the end of that statement, we see all of our slides disappear. Now we can't see them outside of our slider because the overflow is set to hidden, but if we go into our CSS and temporarily turn this off. I'm gonna hit Cmd+Slash to comment that out. Then we can see down here where all of our slides have moved. They've been moved into the lower on deck position or the down position. So let's go back to our JavaScript. I'm gonna leave that overflow hidden commented out for now so that we can see where everything is. And again right now it looks like we only have one slide because they're all just stacked on top of each other but now we're gonna set our active previous and next slides in place. So again we're gonna use the same tweenMax.set method. And this time instead of setting the entire slides array, we're gonna point to a single item in that array. And the current active item is zero. The active index is zero. And we're just gonna point to this active variable here. So slides active, and remember right now this right here is the same as typing slides 0, which would be the first slide in that array. We're going to animate that first slide or set the values of that first slide. And again, we're gonna use curly brackets here and we're gonna set the top position to positions.active. So now, we can see where all of the set up work is starting to pay off because now we can very easily point to any of these positions in order to figure out where to place certain items. So then we can just copy this and paste it a couple of times, and for our second one. Remember, we also have our next and previous variables setup. So for slides next, that's gonna point to the array item with an index of 1 which is the second item in the array or the second slide in our slideshow. We're gonna set it to a position of positions.NEXT. So it should show up just below our first item and we see that it does. Then, for our previous slide, which is, remember, gonna be the very last slide in our slideshow, we're gonna set it to positions.PREV. And that will set it up here. So now we've got all of our slides of where we want them to be initially. And obviously, when we turn that overflow hidden back on, I will be able to see it like it's supposed to look. But for now I wanna keep these visible as we work through this code and start animating things where they need to be animated. But for now that gets us where we need to be, for when the page first loads. Thank you for watching. And I'll see you in the next lesson.