Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Simple Content Slider

In this practical exercise, let’s create a simple content slider. We’re not going to limit ourselves to images either; we’ll create a slider that can display any type of content.

3.3 Simple Content Slider

Hello, and welcome to lesson number 14. For our third demo, we'll have a look at a content slider, but we're not going to limit ourselves to just images as slides. Instead, our slider can really take on any kind of slide, text, HTML, whatever we can throw at it. Now, I'm gonna show you the slide, it's the finished one. We just have some quotes here. We have the next button and the previous button. We can cycle through them like this. When we are at the beginning, the back button doesn't work. And when we get to the end, the forward button doesn't work, so is that of wasting a lot of time to writing this code. Essentially, you can just open the source files that come with the course, and then just copy the code from there. I'm gonna walk you through the code. I'm going to explain why I did what I did, and what's the purpose of each function in each piece of code. So, first things first, let's have a look at the markup here to understand what's going on. So, we have a container that has a slider container with an idea of slider, and each slide is basically a list item with a class of slide. So, we start by defining a couple of variables. We're getting the slides, and we're getting the slider itself. We're setting the cursor to zero. Now, the cursor is gonna serve as a guide, so that we know on which slide we are. We are also the finding slide width. A top height, top height will be used to find the height of the tallest slide, slide count, of course, gives us the number of slides. Now, if we have slides, this is a check that we have to do, then we're getting the slide width, now, why are we doing that? Because the way we're gonna organize things is we're going to have the slides positioned absolutely. And we're just going to offset them by their height. So, the the slide that's currently being viewed is gonna be at left zero, but the slide before it was gonna have the value left minus the slide with. The slide before that, the same way. And the slides after the current one are gonna have the left value equal to plus the slide width. So, I'm actually show you that right here, if we take a look at the Inspector, you're gonna see that our slides have a style set. Look this first one 4,995 pixels, and then we decrement like this until we get to zero, which is the current slide, but if I'm gonna hit back, watch what happens with the left values. Now, this slide is the current one. It's left is at zero, and the one that was before is at left 999, we do back again. You'll notice that the value of the left property changes. So, how are we achieving that? Well, we're setting the left value for each slide here. So we're doing a loop, and then on each slide, we're setting its width times this counter plus pixel. So, if each slides width is 1000 pixels, then the first slide is gonna be 1,000 times zero, because the cursor area is at zero, so that will be zero. The next one is gonna be at 1,000, the next one 2,000 and so on. Then we calculate the tallest slide. And calculate tallest slide is a function that basically runs through all of our slides, and it checks if the offset height of each slide is higher than the top height, or the current top height, then we're setting the top height to the height of that slide. And then what we're doing is we're setting the height of the entire slider to that top height. And we're doing this to ensure that all the slides are centered vertically, and of course, to do that, we need to know the biggest slide. Next, we're gonna add the animated class to each slide. And the animated class will basically allow for that smooth slide, well, slide is probably not a good term here, but the transition. So, changing, it's left from zero to minus 1,000, for example, is made with a transition. Now, why aren't we adding this from the beginning? Well, if we did, when we refresh the page, all of the slides would just go flying on the screen, because they would have that animated class. So instead, we're adding after all the elements have loaded, then, we're adding event listeners for next and previous buttons. And we're checking if the cursor is smaller than the slight count minus one, which means if we haven't reached the end, we move the slides forward. And we increase the cursor. Same thing for this, but only in reverse. Now, move slides will take the direction. So it's either forwards or backwards, and what it's gonna do is it will redo those left values. Right, so the left values, as you saw, when I showed you the inspector when you're moving the slide, all of those values change. Let me show you again. So when I hit the next button, notice this slide here. We're going to the second one. So the first one gets left of minus 999, second one is 0, next one is plus 999 and so on, and that's what this code here is doing basically. The replays that you see here basically has the role of stripping the value from the px characters, it's what we're doing. And then we're adding slidewidth, and then we're adding pixels again, so that it's compatible with this left property here. Finally, we're adding an EventListener for resize, because when we resize our page, the width of our slides will change because it's responsive. So, that means the left values will be rendered useless, we have to calculate new ones. And that's what we're doing here, basically, is we're recalculating those left values and the tallest slide and that's it. Really, it's a very simple method of creating the slider, and or responsive one and that. It doesn't have any touch enabled features like when you're on a smartphone and you swipe, it's going to change slide, it doesn't have that. Instead, it just uses these two buttons. Now, our fourth demo will be a image slider, again, a very popular JavaScript pattern that's being used in a lot of web pages. So, we're gonna create that in the next lesson.

Back to the top