This tutorial will show you how to create your own jQuery content slider. You may ask “Why create my own if there are hundreds of already made sliders out there?” This is true: I myself almost always use ready made plugins for my projects. Yet, it is always a good thing to know how they work. It also comes in handy – if you should ever want to customize it (it’s always harder to edit someone else’s code).
View the Demo
Here’s a preview of what we’re building:
So are you ready to get started? Okay, let’s begin:
Step 1: Create the Base Mark Up
What we need is a series of images in an unordered list:
Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.
Step 2: Add jQuery Code to hide unfocused images:
What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):
Add the following code right above the closing head tag:
In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.
Step 3: Add “Next” and “Previous” Buttons
In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:
Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:
Step 3: The Nifty .Animate()Method
Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:
Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.
Add the CSS code below inside the “head” tag so you can see the links and start testing them:
Step 4: Make ‘er Nice and Purrty
Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.
You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:
Also – the good thing about this code is you can place and style the buttons individually.
There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment below.