7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

9.1 Building the Slider

In this lesson we’re going to build a simple, animated content slider using the Flexbox model and a little bit of jQuery. Let’s begin!

Useful Links

1 lesson, 00:39


2.Project 1: Flexbox Menu
2 lessons, 11:59

Basic Menu Styles

Styling the Flexbox Menu

3.Project 2: Complex Layouts
2 lessons, 12:16

Flexbox for Page Layout

Nested Flexible Boxes

4.Project 3: Banner With Centered Content
1 lesson, 07:25

Vertically and Horizontally Centered

5.Project 4: Ordered Content
1 lesson, 05:23

Changing the Order

6.Project 5: Image Grid
2 lessons, 10:03

Basic Styles

Using Flexbox to Finish the Layout

7.Project 6: Uneven Image Grids
2 lessons, 12:39

Basic Image Styles

Styling the Grid

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

Building the Flexbox Modal

Flexbox Modal Functionality

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

Building the Slider

1 lesson, 00:38

Final Thoughts

9.1 Building the Slider

Hello and welcome back, for this bonus project, we're gonna be creating a content slider using the Flexbox model to lay it out. And so here we can see some simple HTML, and first of all, you can find the URL for this starting pen in your course notes for this lesson. And once you've opened that up, let's go ahead and click on Fork to create a new copy of it. And all the changes we make in this lesson will be saved in this new copy. So you'll notice we have, in our HTML, we have a containing div with a class of slider. That's gonna contain everything, including your previous and next buttons, and all of the slides. Immediately inside that div we have three things, we have a button with a class of btn-prev, for previous, that's this button up here at the top. Then we have a div with a class of slides-container, this is what contains all four of our slides, and then we have our next button. So we have three items inside that slider div. And then inside this middle div, this slides-container div as I mentioned before, we have all of our slides. So we have a div, with a class of slides inside that slides-container. And then this div with a class of slides, has four separate divs, with a class of slide. And each of those has an h2, and an h4, with some text on it. As you can see, there are no image tags here, all of the images that you see, are background images. And we can see that if we jump into our CSS and scroll down to the bottom. We have our first slide, which has a certain URL, second slide, third and fourth, so they all have different image URLs. And so now we wanna jump into our CSS and set this up the way we want it to look. Now each of these background images has a native width and height of 320 by 240. So, they're 320 pixels wide and 240 pixels tall, and I wanna start with making our slides that same size. So, you'll see that we've already applied some styles here to our slide, we have a basic slider class, which is the, again the container class that contains everything here. We've set our text color to white, and then we've set a text shadow behind all of our text so that we can see it easier on top of the images. And then we have, the buttons inside of those sliders which are going to be our previous and next buttons. And then we have h2, h4, and then all the background images. So now lets go down to the very bottom, and I am gonna create a rule for the slide class and I want to set the width for our slides to 320 pixels, and I'm gonna set the height of these slides to 240 pixels. And already we can see the full width and heigh of each of our slides and it's a good start. And as far as these slides go these are gonna be the first items that wanna jump into the Flexbox model for, because I want to vertically and horizontally center our text inside these slides. And in our HTML if we can find those h2s and h4s, as we can see that they're inside a class of slide-text. The reason they're inside this class is because we need that containment class so that we can center everything appropriately. So we have this slide div which contains everything inside a single slide and inside that div we have a slide-text div which contains our h2 and h4, it contains all of our text. So we want this slide class, the one that contains that inner div, we want that to have a display of Flex so that we can vertically and horizontally center this slide-text div. So we'll jump back into our CSS and we'll start by giving our slide class a display of flex, when we do that, we something shift around a little bit, but nothing really changes just yet. The next thing we wanna change, and we've done this before several times, is our align-items property, we're going to set it to center, and that will vertically center our text. Now in order to horizontally center the text, we need to set up our justify-content property, and if we set that to center as well, then we'll get where we're going, almost. You can see that the text block is now centered, but the text itself is not centered, so we also want to set text-align to a value of center, and then we've got all of our text centered like we want it. So now, what about the overall set up, what about the overall layout? Well, if you go back to a HTML and scroll up to the top, we have our main containment div. And again, if we collapse this slides container div, we can quickly see that we have three items inside that slider, one item is your previous button, one item is all of our slides, and then the third item is your next button. And I want to align these up from left to right, I want the previous button to take up the full height of the slider, and I want it to be on the left side, and then we'll have all the slides in the middle, and then our Next button is gonna be on the right. Well we can set that up very easily using Flexbox, and that's what we're gonna do, so we're gonna set up our slider as another Flex containers. We'll jump back into our CSS, and here is our initial rule for the slider class. And the first thing I want to add here is I want to give is a display value of flex. When we do that you'll see that it automatically sets it up kind of like we want it, we've got our previous button, our slides, and our next button. Now all of our slides are just stacked on top of each other which obviously is not what we want, but already that is a step in the right direction. The next thing I wanna do, if we jump into our HTML, remember we have our previous button, our slides container, and then our next button. I wanna set this up so that our slide container is, and I didn't mean to expand that out, but it doesn't matter. We wanna make sure that our slides container here is the same height as the slides themself, and those slides are gonna be 240 pixels tall. So we're gonna jump back into our CSS and let's go just beneath our slider rule, create another rule for slides-container and for this container, we're gonna set our width to 320 pixels which is the same width as our images. And we're gonna set our height here to 240 pixels, which is the same height as our images. Now you can see that our buttons here, our left and right buttons, have adjusted to match. Now it doesn't look like our slides container has a height of just 240 pixels because we have a bunch of overflow. Eventually we are going to set that overflow to hidden, but i still wanna keep them visible for now so that we can whats gonna happen next. The next step is to take our slides-container and set it up as a flex container for the slides inside it. So we want each of these slides, instead of being aligned on top of each other, we want them aligned left to right. And let me correct something, I think I said slides-container, it's not the container that we need to setup that way, it's if we go inside the slides-container we're gonna look at this slides div inside that slides-container. The slides div is the one that contains our four slides, so the slides div is the one we need to setup as a flex container. So underneath the slides container, we'll create another rule for slides, and we're gonna give it a display value and set it to flex. And when we do that you'll see it sets up our four slides side by side, which is what we want, but as we can see our widths are a little messed up now, and that's not what we want. So what I wanna do here, is I want to set this slides div, remember this contains all four of our slides in it, I wanna set this up so it's gonna be as wide as it needs to be to contain all four slides. And remember, these slides are 320 pixels wide each, so if we multiply that by four, that's gonna give us 1280 pixels. So that's the width of our slides class inside the slides-container, we're gonna give it a width of 1280 pixels. When we do that you'll see that our slides are now going off to the side, just as we want them. And then all that's really left to do from a CSS perspective, is to go back to our slides container here and set it's overflow value To hidden, and then all of our slide off to the right. Everything that goes outside the boundaries of that container, all of that is now hidden. So then, all that's left is some JavaScript, and I'm just gonna Copy and paste that over, since this is not a JavaScript class, it's a Flexbox class. We're gonna paste that JavaScript here, and I will go over it very quickly. First of all, we have a variable that contains our slides, this is pointing to the div that contains all four of those slides. Then we have an array called positions, this is going to be the x coordinates of this slide's item. Remember the slide's item, even though the items over here on the right are invisible it's still 1280 pixels wide. And so as we click on the next button and advance to the next slide we need it to move to the left and we need it to move to the left exactly 320 pixels. So the initial position is going to be 0 and then as we go to slide 2 it will be -320, as we go to slide 3 -640, etc, etc, and then we have a variable storing of our current position at 0. And this is pointing to the index of this positions array, and so if current position is set to 0, that means we're looking at the very first item in this array. If currentPosition is set to 1, we're looking at the second item in the array which is -320. So what we are doing with our previous and next buttons, we'll look at our next button first, when we click on it we are running this code here. So we are checking to see if currentPosition is less than positions.length minus 1. In other words, if we haven't reached the end of that positions array yet, then we want to advance to the next position. So we're going to increase currentPosition by 1 here by saying currentPosition ++. And then this value will increase by 1, otherwise if we have reached the end of the array and we want to go back to the beginning of the array by setting current position back to 0. Then once we've set the value of that current position variable we're going to animate the slides using the JQuery animate function. So all we're doing is we're setting the left value or the left property equal to a value in that position's array, according to whatever our current position value is, and that's gonna take place over the course of 500 milliseconds. And the end result of that is every time we click on the next button now, our slides will advance if we've set it up properly. Now you'll see that the slides are not advancing yet, and the reason for that is this animate function here is changing the left position of our slide's element. The problem is it can't do that, because in order to change the left property of an element, we first need to give that element a position property. So we need to go back into our CSS, find the slides element here, and give it a position of relative, and that's all we need to do in our CSS to get this to work. So now if we click on the next button, it's still not working, the reason it's not working is we first need to include JQuery here. So if we go to our settings, go to the Java Script tab and do a quick add of JQuery, save and close, then click on the next button. There we go, so now our next button is working just fine, and when we get to the end it goes back to the first one. Our previous button is basically just doing the opposite, when we click on it, it's gonna see if current position is greater than 0, if so, then we're gonna move backwards in that array, we're going to decrease the value of current position by1. Otherwise if it's not greater than 0, if we're already at the very first slide, then it's gonna set it to the last item in that array to go to the last slide. So when we click on the previous button it jumps to slide 4, and then we click again it just goes 3, 2,1, click again and it jumps back to the end to 4. So that's how we can set up a simple jQuery slider and lay it out using the Flexbox model. Thank you for watching, and I'll see you next time.

Back to the top