2.3 Functionality and Styling

Hello and welcome to your lesson number three. In the previous video we all learned how to write the proper mark up for our slider. Now, let's see if we can bring it to life by adding some CSS and JavaScript. And we'll start with the JavaScript, the first thing we got to do is load the Sequence.js files. So we'll go all the way down here and we're gonna say script source, we're gonna load it from the bower_components folder. And we'll use the minified version. Now, we need another JavaScript file, that will launch or initialize sequence. And you can name this file however you want. But if you want to follow the official guidelines, then you should name it the following way. sequence-theme, dot, the name of the theme, this can be anything you want. In my case I just said tutsplus.js. And I have that file right here. And I'm going to start with a variable. I'm going to call it elem but you can call it whatever you want. The idea is to reference our container. div id of sequence, in my case. In your case, it might be something else. So I'm gonna say document.getElementById sequence. Then, I'm gonna create another variable. I'm gonna name it seq, and I'm gonna say, sequence. And I'm gonna pass in my element. So with this, I've actually launched or initialized sequence on my div with an ID of sequence. Now sequence also allows us to work with options, options which can be used of course to configure the whole experience. So to use them create an object. You can call it whatever you want. I'm gonna stick with options. And inside that object I'm just gonna use an option called keyNavigation. I'm gonna set it to true. And keyNavigation allows me to switch between steps, or slides in our case, using the right and left arrow keys. And to use these options you simply add them as a parameter here. So now if we go back to our page here you'll see that when I hit the right and left arrow keys. Sequence is already working, it's switching between steps. The only problem is we don't have the necessary styling to show it correctly, so let's go ahead and add that. I'm gonna close this for now, and I'm gonna add my style sheet here on the top of the page. And just like the JavaScript version, if you want to respect the official guidelines, you need to name your CSS files in the same way. So I'm going to load CSS/sequence-theme.tutsplus.css. And on top of that, I'm gonna load a rest file called normalize, which I just got using Bower. You can see it right here. Now for the CSS, I'm gonna write the following. We have some general styles, and then some styles for the slides. And then the styles that we're actually interested in start right here. So I'm not gonna go over the entire process of writing the CSS, that's redundant. The CSS will depend from project to project. Instead I'm just going to highlight the stuff that's important for sequence to work properly. So here, I am styling the container. I'm giving it a position: relative, setting the width to 100%, also the max width. And setting a height, in my case, I want it around 600px tall. I'm also setting the overflow to hidden. And that will make sure that no content will appear outside of the container's boundaries. Next, I'm doing a little bit of reset here, margin and padding: 0, and list-style: name, because I'm using lists. Then I'm positioning the canvas, position:absolute, setting the width: 100% and height: 100%. And a white space to no wrap. And that in conjunction with these styles will allow me to position my slides or my steps one next to each other. So not one on top of the other. Instead one next to each other. I'm also aligning the text to the center and setting a margin on the content. And by applying this CSS we go from this, to this. And now we can use the right and left arrow keys to navigate between slides. And that's how easy it is to create a working slider. And that's the end of this lesson, next time I'll show you how to work with animations. See you there.