How to Start Using jQuery Sliders in Your Designs

jQuery sliders offer a simple, elegant way to display content without giving up valuable real estate on your web page. They have skyrocketed in popularity and can be used in a variety of ways. Let’s go over the popular styles, choosing a slider and integrating one into a demo site.

A Little Background

Once upon the time, an image on the web just had one way of showing up: as a flat JPG, GIF or PNG. Sometime a few years ago, images started learning new tricks; They grouped together and started showing up in jQuery sliders to the applause of visitors all around.

Since then, they’ve learned a plethora of new tricks that make them prime material for any web designer. Whether you’ve used them before or not, this tutorial will give you insight into the different flavors of sliders, when to use them in a design, and we’ll even walk you through an installation of one.

If there is one thing jQuery sliders don’t have, it’s a consistent name. The slider goes by a wide array of aliases: gallery, carousel, promos and rotators but they all provide the same general feature – display multiple content items in a shared space on the page. For the purpose of this article, I will refer to them all as a “slider”.

jQuery sliders can be used for nearly anything but most are used display a number of photos in a slideshow format in a way formerly handled by Adobe Flash. Many offer a number of transition effects between slides and can be controlled by previous/next buttons, tabbed or thumbnail navigation.

Popular Styles of jQuery Sliders

The number and variety of sliders continues to grow steadily, so finding a slider to fit your needs has never been easier. They come in all shapes, sizes, and sizes – a number of them are free, which means that when you do pay for a slider, it’s usually loaded with great features.

Lets walk through a few of the more popular styles of sliders below. Keep in mind, most examples shown are from the unstyled demo versions and all can be customized with some basic CSS knowledge and reading the documentation.

Standard Photo Slider

Example used: NivoSlider – http://nivo.dev7studios.com/

A very popular style of slider is the photo slider. Many accept an image and some metadata such as a caption, often pulled from the alt or title tag automatically.

Advantages: Typically the easiest to get started with for beginners. The focus is put directly on a large image you choose. Many have multiple transition effects between slides from sliding, fades, zooms and more.

Disadvantages: If you have a wide variety of content you need to display such as HTML, images or video, a mixed content slider may be a better choice – most require you to stick to images.

Mixed Content Slider

Example used: Anything Slider – http://github.com/chriscoyier/AnythingSlider

While similar to the photo slider, mixed content sliders allow you to use more than just images. Review all the options when choosing an image slider, some do allow for HTML but may not be listed in the primary feature list.

Advantages: Perfect for displaying video, HTML and image content within the same slider if needed.

Disadvantages: Mixed content sliders can be a bit more advanced to work with than your standard photo slider.

Gallery Style Slider

Example used: Galleria – http://devkick.com/lab/galleria/

The gallery style is often used in photography applications. The navigation is often made up of thumbnails to browse through the images in your collection.

Advantages: Very easy for users to browse through the images they want to see quickly.

Disadvantages: Often times takes up more real estate on the page than a standard slider to fit the image and all thumbnails.

3D Block Slider

Example used: Cu3er – http://getcu3er.com/

Think of a Rubik’s cube, built on the web, without all the headaches. That’s basically what a 3D Block Slider is – it’s incredibly impressive from a visual standpoint, and can be perfect to add that extra bit of excitement to a site.

Advantages: One of the most visually stunning sliders out there. If visitors haven’t seen it before, their jaws might hit the floor.

Disadvantages: While the rest of the sliders in this tutorial are jQuery, most of the 3D Block Sliders are built in a combination of Adobe Flash and XML… which isn’t the most “standards friendly” format to use. These sliders can require a little more time to “preload”; Because they are built with Flash, it also means that they can be a little trickier to install if you aren’t familiar with it.

3D Space Slider

Example used: Image Flow – http://cool-javascripts.com/effects/image-flow-09.html

Inspired by Apple’s cover flow effect, this slider effect is a stunning way to display your work. When coupled with a minimal style site, this slider can feel right at home.

Advantages: This style can be a very impressive and very interactive way for users to browse a gallery of images showcasing your work.

Disadvantages: Many have a small scroll bar or use the mouse scroll wheel or keyboard to view the images which can be a bit awkward with some unintentional scrolling.

Full Size Slider

Example Used: Supersized – http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

The full size slider is what it seems – a slider that takes up the entire page to show off your work in a way that can’t be missed.

Advantages: If you have a “go big or go home” style, they really do not get much bigger than this.

Disadvantages: They may be a bit tough to integrate into a site since they are designed to fill the screen with your work. Images used must be quite large to fill new high resolution screens.

Thumbnail Slider

Example used: jCarousel Lite – http://www.gmarwaha.com/jquery/jcarousellite/

Sometimes you may find yourself in a situation where you want to display a grid of images and allow quick browsing without making the user load a second or third page.

Some sliders have the capability to show multiple images per slide or multiple slides at once so check the feature list. In jCarousel Lite featured above, “visible” is set to 3, showing three slides at a time.

Advantages: Allows you to scroll multiple items at once for times when a large image or content is not needed. Great for groups of items or when you have the room on the site.

Disadvantages: There are not many disadvantages to this style other than just being a little more complex to set up than the standard photo slider.

Horizontal Sliding Tabs / Accordion Slider

Example slider used: HSlides – http://plugins.jquery.com/project/hslides
Sample image is from the Circo theme: http://bannersmonster.com/themes/Circo/

The accordion style makes browsing through featured items a little like flipping through pages of a book. This uses a classic “hide and reveal” user behavior by just showing a snippet of the content before sliding the entire accordion box out.

Advantages: A very unique and fun way to display your items. The stepped style can help reinforce a sense of order if you are using a “step 1, step 2, step 3″ content paradigm.

Disadvantages: Not great for dozens of slides and can be a bit difficult for new web users to operate accidentally sliding items open and close with a pass of the mouse. Consider a click to open tab style or setting if available.

Large Tabbed Slider

Example used: Feature List – http://jqueryglobe.com/article/feature-list

The feel you get when using the large tabbed slider is a sense of simplicity – step 1, step 2, step 3. A great way to show progressive changes, features or product options.

Advantages: Very attention grabbing with proper styling. Like the accordion, this slider shows a hint of what is inside each slide, which can be great for visitors that are seeking specific information.

Disadvantages: You may need to limit the number of items you want to include unless you use a tabbed slider like the iTunes Music Store.

When to Design Your Own Slider

Although the variety and quantity of sliders is steadily on the increase, sometimes you just can’t find a solution for for your unique situation.

If you are going to be using many sliders in your projects, it is worth your while to dig in and really learn how they work and build one yourself. The best way to learn is by example.

Dissect existing sliders, see how they work and learn from it. Don’t steal other developer’s code but instead focus on what they are doing: animations, changing opacity and reviewing the settings they offer and write it in your own way.

With tools like Firebug, you can “inspect” a slider in real-time, watching it manipulate the z-index, opacity or positioning to move content from one slide to the next.

You will gain a greater understanding of what is going on under the hood, be able to perform customizations, and find problems faster down the road by digging into as many sliders as you can to learn how they function.

Finding The Right jQuery Slider for You

The only thing more plentiful then the number of jQuery sliders are the number of sites showcasing them. Rather than try to list all of them here (new ones come out every week!), let’s walk through how to find one that’s right for you:

A quick Google search will reveal sliders can be found in a variety of places:

Roundup Posts

Often titled something like “25 Useful jQuery Content Slider Scripts” – they are posts created to collect and review the different sliders available at the time. Read the comments as well as the article to see other people’s opinions on the collection.

Tutorial Sites

Sites that offer up tutorials on building sliders will often times include the final source code of the project so you get a step-by-step guide as to how it is built and the final working result. Unless specifically noted, the source project is just for educational purposes, ask before using in any projects.

Online Marketplaces

CodeCanyon offers an entire category for premium sliders. http://codecanyon.net/category/javascript/sliders

View-Source

Sometimes you will come across a site with a slider and you want to see which plugin they may have used. Since JavaScript is a client-side script, do a view-source of the page and look which JavaScript files are imported, the plugin information should be included at the top of the plugin’s source script with a URL for more information on the plugin for download and documentation.

Be courteous of the effort others have done, read and abide by the license agreements included and give credit where credit is due.

Deciding on a Slider

Choosing a slider is largely dependent on the functionality and options you need and the overall style you are going for. Decide on the type of content you need displayed, how you want users to navigate through it and see which slider best matches your requirements.

Once you have narrowed down your choices, compare the overall script size and check whether is is compatible with all browsers.

Some sliders are offered in a “lite” version such as jQuery Cycle Lite if you’re looking to keep the overall file size down in your project. Often times, the light version is just missing the additional transition effects, sticking with the most popular options available.

If you’re not a jQuery master, choose a slider with great live demos you can download and documentation to help guide you through making your customizations.

Skinning a Slider

One of the great things about using a pre-made slider is that most of them are incredibly easy to redesign according to your needs. This process (usually just called “skinning”) isn’t as hard as it might seem. Usually it requires just editing a simple CSS file – the most complex skinning will usually get is swapping out graphics that you’ve created their the default graphics (like backgrounds and buttons).

In addition to skinning sliders, it’s also worth noting that with most sliders, it’s easy to change the size to fit the website that you’re designing.

Integrating Sliders with an Existing Site

Placing a slider in an existing design is not a single-step process but most slider scripts come with a basic sample page to get started, importing jQuery, CSS, sample content and initializing the plugin with the default settings.

Let’s import jQuery Cycle into a quick sample site created for the purpose of this tutorial.

Download the before and after sites to follow along.

1. Initial Site Structure

The demo site consists of basic HTML, CSS and an image which will be the starting point for integrating the slider.

• index.html – The sample home page we are using
• css/screen.css – General style information
• images/sample_water.jpg – Current static image for the home page

2. Download jQuery Cycle

We will be integrating the jQuery Cycle plugin for this demo.

• Visit http://jquery.malsup.com/cycle/
• Download and unzip the latest version to your computer.
• Copy jquery.cycle.all.min.js to your site in a new /js/ directory

3. Import the Necessary Scripts

Import the jQuery library and the Cycle plugin in the of your site by adding this code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>

The first script should be the latest version of jQuery. You can grab it off jquery.com or load it from the Google Libraries as we have done above.

The second script is the plugin source which we placed in the /js/ folder.

4. Add the Slider HTML

Swap out the current static sample_water.jpg image used in the demo site with an unordered list for slides:

<ul id="promo">
    <li><img src="images/sample_water.jpg" alt="Slide One" /></li>
    <li><img src="images/sample_hills.jpg" alt="Slide Two" /></li>
    <li><img src="images/sample_park.jpg" alt="Slide Three" /></li>
</ul>

We will just use three images to get started, note the id=”promo” attribute, we’ll use this later to tell our plugin this is the container of our slides. Since the slides are essentially just a list of related content, a UL tag is a good choice.

5. Add the Optional Slider Navigation

Underneath the unordered list of promos we added above, we will add the navigation to control the slides. The plugin will create the individual navigation links dynamically at runtime as you add and remove slides from the list.

 <div id="promonav">
    <a href="javascript:void(0);" class="next">Next Slide</a>
    <div id="promoindex"></div>
</div> 

The next slide button’s class corresponds to the ‘next’ parameter we will use to advance the slides manually.

The promo index is automatically generated if the ‘pager’ parameter is set in the options. By entering it manually, we can control where it goes on the page in case you wanted it somewhere other than where the plugin places it.

6. Style the Slider

Let’s add CSS to style the slider list. Some sliders like Nivo Slider have a custom stylesheet you can download and get started but for this demo, let’s add our custom CSS directly into the end of the site’s main screen.css file.

/* Remove list formatting from Promo UL/LI */
#promo, #promo li
{
    margin:0;
    padding:0;
    list-style-type:none;
}
/* Styles for the optional promo navigation container */
#promonav
{
    padding:4px;
    background:#eee;
    border:1px solid #e0e0e0;
    margin-top:1px;
}
/* Keep the next button at the right edge */
#promonav .next
{
    float:right;
}
/* Link styles in promo navigation  */
#promonav a
{
    padding:0 3px;
    border:1px solid #eee;
    text-decoration:none;
    outline:0;
    color:#777;
}
/* Style applied on mouseover of promo navigation link(s) */
#promonav a:hover
{
    color:#000;
}
/* The index automatically gets an activeSlide class, use this to indicate the current slide */
#promoindex a.activeSlide
{
    font-weight:bold;
    background:#fff;
    border-color:#ccc;
}

7. Initialize the Plugin:

At this point, we have jQuery and the plugin imported but nothing telling the plugin which element on the page is our slider or what options to include – it needs to be initialized.

Create a file called setup.js and place it in the /js/ directory.

Import it in underneath the jQuery and Cycle scripts you imported in the area of the site earlier in the tutorial.

<script type="text/javascript" src="js/setup.js"></script>

It is important that you import jQuery, jQuery Cycle and then setup.js in that exact order or the plugin will not work.

Inside setup.js add the following code:

$(document).ready(function() {
    $('#promo').cycle({
        fx: 'scrollHorz',
        timeout:    4000,
        speed:      800,
        next: '#promonav .next',
        pager:    '#promoindex',
        height: 200,
        pause: 1
    });
});

Lets me explain what is going on in the code above.

We start out by checking if the document is ready with the document.ready, otherwise the plugin may try to modify elements on the page that are not available or ready.

The next line is telling the Cycle plugin what element we are using as a container of the items we want to cycle through. In our case, the container has an ID of promo so we enter #promo.

The items listed from fx to pause are options we are passing into the plugin. If we do not include any and simply use: $(‘#promo’).cycle(); the plugin would use its default settings. Options are listed in a comma separated list. The number and type of options vary per-plugin but for jQuery Cycle can be found at http://jquery.malsup.com/cycle/options.html

The next and pager options refer to the navigation we built in step 5 above and can be removed if you do not want to include navigation on the slider.

Download the before and after sites to follow along.

Think Outside the Container

Sliders do not need to be large photo sliders stretching across a page of your site. Use them to display sections of rotating content such as testimonials, your latest tweets or popular blog articles in areas of the site that could benefit from the extra room.

Thanks for reading!