Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Nivo Slider

Powering Orman's Image Slider Controls With Nivo

Read Time: 6 mins
This post is part of a series called Bringing Premium Pixels to Life.
Build a Popup Modal Window Using the jQuery Reveal Plugin
Build a Quick and Elegant Login Form

Next up in the Premium Pixels session is Orman's Image Slider Controls. We'll take the PSD, rebuild it for the browser, then make the whole thing functional using the brilliant Nivo Slider jQuery Plugin.

Step 1: Create our Folder Structure

To keep everything tidy we'll first create our folder structure. Go ahead and create three folders called "css", "images" and "js" respectively. The css folder will contain our stylesheet. Images is for, well images, and js will contain our jQuery plugins - Nivo slider in this case!

Folder StructureFolder StructureFolder Structure

Step 2: HTML5 Base Markup

Okay, we have our folder structure, now we need to create our html document. Create this within the root of your project. We'll use a simple HTML5 base template, whilst also linking to the jQuery library hosted by Google.

Step 3: Creating Some Global Styles

We'll kick things off with some reset styles:

Now, before we jump into the slider itself we'll add a background to the page. If you've downloaded the PSD before you'll see there's a layer with a radial gradient suggesting some subtle lighting. We'll create this by having a repeatable pattern, made slightly lighter than the PSD. Having applied the background we'll use some inset box-shadows on the html tag to try and replicate the light in the center.


Step 4: The Slider Structure

Now we can finally start our slider! The Nivo Slider is the work of Gilbert Pellegrom and Michael Wright, together known as Dev7studios and professional chums with Orman.

It allows us to create our slider using the minimal amount of markup as possible. All we need to do is create a div with an ID of whatever you like; I'm using "slider" in this case, and a class of "nivoSlider". Then all you need to do is place your images inside the div, that's it!

Step 5: Centering Our Slider

Next we'll center our slider in the middle of the page, if you followed my last tutorial you'll have gone through the process on how to achieve this. If you'd like more info, check out this article on CSS Tricks.

We've also gone ahead and added some box shadows to the slider, while remembering the browser prefixes. Note we've also added some more CSS which is required for nivoSlider to work.

Step 6: Downloading Nivo

Time to integrate the Nivo Slider. Start off by heading to http://nivo.dev7studios.com/pricing/ and downloading the jQuery plugin. Once downloaded and unpacked, copy the jquery.nivo.slider.js file to your js folder created back in Step 1.

Next we'll need to link to this file inside our html document.

Step 7: Hooking up the Plugin

Now we have our plugin downloaded and linked to, we'll need to hook it up to our slider, whilst defining some optional parameters. Take a look at the Nivo documentation for details on all the options available.

Step 8: Where's dat Caption?

We've completed our slider! But wait, what about the caption? Nivoslider creates captions from the title tag of our images, it then applies ID's/classes so we can style it to our needs! We'll create the background of the caption using CSS3 gradients. Note we also use the caption background as the Control Nav background, this was a pretty logical way to create it.


Step 9: Finishing Off

We're nearly complete, we just need to add our "Next" and "Previous" buttons. Until this point we've relied on as much css as possible, but we'll now create these arrows using images with a transparent background.


Okay we've done it! We've taken another one of Orman's designs and coded it up, this time using the brilliant Nivo Slider!

In terms of cross-browser friendliness, I went ahead and tested this in IE7 and above. Other than the caption dividers (created with box-shadow) there shouldn't be any problems at all. If you're interested in more extensive browser support, check out this post on curing CSS3 headaches in older browsers.


I hope you enjoyed this tutorial, thanks for reading!

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.