UPDATE: jFlow Plus has a new update and this article is no longer updated. Please go to jFlow Plus v2 to view the most recent version’s documentation, demo and download.

jQuery Sliders make a great addition to any website. The ideal slider should allow the user to flip through each slide and have a timer countdown for auto slide functionality. The jFlow plugin for jQuery is a good slider that is easy to implement, but unfortunately lacks an auto slide functionality. Let’s examine how we can extend this plugin to offer an improved jFlow slider with autoslide and pause functionality.

jFlow Plus - The Light-Weight Slider... Improved.

Introducing jFlow Plus

jFlow Plus is an extension of the original jFlow Slider to extend the original light-weight code for added functionality (auto-slide and pause functionality).

jFlow is great for loading quickly and having actual content within your slider such as headings and paragraphs for each individual slide. This is good for both user experience and search engine optimization.

jFlow Plus Demo

jFlow Plus is a free jQuery plugin that is a modified version of the popular jFlow plugin released in 2008. It is available from wordimpress.com and also jQuery.com’s plugins sections.

Download the Demo Package

View the Demo

Visit the jQuery jFlow Plus Page

Please Note: This article does not pertain to implementing with WordPress. A future article will demonstrate how to effectively implement jFlow Plus on the WordPress platform.

Implementing jFlow Plus

Ready to implement jFlow Plus onto your website? Great! Open up your favorite IDE and let’s begin. For this tutorial, I will be using Dreamweaver.

Create the HTML Framework

Create a new HTML document and name it “index.html” and save it to your root directory. If you already have an existing website then skip this step.

Load the Script in your “Head”

Download the jFlow Plus scripts available in the packages above and upload them to the appropriate directory on your website.

Upload your jQuery Scripts

Now let’s load our scripts in the between the head tags of our index.html file:

Do you Have 3 Slider Images?

Make sure that you have some images ready for you to use in the slider. In the jFlow Plus demo package available above there are 3 images of Yosemite that you can feel free to use.

jFlow Slider Images

Add the jFlow Slider Elements to the Page

Now that we are calling our JavaScript files and jQuery in the Head, let’s add the basic HTML framework we will will be working with to our file. Add the following right after the first openingtag:

Slide 1 jFlow Plus

Welcome to the First Slide!

We hope you enjoy the jFlow Plus Slider – a light-weight slider for your web design needs. Read More!

Slide 2 jFlow Plus

Hey you made it to the Second Slide!

We Know you enjoy this plugin… it’s not too hard to implement, right? Read More!

Slide 3 jFlow Plus

Woah You’re on the Third Slide

You’ve completed quiet the journey! All the way from slide 1 to slide 3… congratulations! Read More!

Prev Next

Notice that we are wrapping our content with span tags. We use span tags because if you used div tags it would interfere with jFlow Plus. Ok great, now that we have the scripts and HTML framework in place let’s fire up the jFlow.

Initialize the jFlow Slider

Now that we have the scripts in place for the jFlow slider to work we need to initialize the jFlow scripts once the DOM is ready. To do this we will add the following bit of code to our head right after the jQuery and jFlow scripts:

Add the CSS to the Head

Cool, now we have out scripts importing on page load… the problem now is that it’s plain without and CSS magic. Let’s add a stylesheet to the head before the javascript and lay down some styles for our jFlow slider. To do this create a new directory called “styles” and add a new file called “style.css”:

jFlow styles directory

Above is an image of how your website’s file structure should look now. Below is the code you will need to insert above the jFlow scripts in your head.

Let’s look into the jFlow Plus CSS Further

To develop an understanding of how our jFlow Plus slider is being styled let’s take a look into the style sheet and examine exactly how our markup is being styled. You’re going to be tweaking these styles heavily when you go to implement it on your own web project.

Let’s begin with the Container

The great thing about jFlow Plus is that it takes care of a lot of the CSS for you. For the most implementations, modifying the styles for the container elements is already taken care of. For our demonstration, let’s begin by setting their positioning (we will use absolute) and styling the content within each individual slide’s spans. Also, let’s give a nice transparent background for the content for visual appeal.

or you can simply:

You can now see that the text is nicely place over our sliding image in the position we declared above. As well we have also provided a nice background that can be changed per slide. Also remember that you can change up the position of the content by moving it’s span via CSS. Very flexible!

Finish Styling the Slide Content

Let’s make sure that we give each span’s content some individual styles to please our users.

Image showing a view of the demo jFlow Plus slider:

jFlow Plus with some content

Please remember that this is just a demonstration and that you can style each content container much more individualistically than the CSS I’ve shown above.

Don’t forget the Links

Let’s add some quick style to our links to increase usability, click through rates and user experience.

First give the slider links some color, secondly a hover effect and finally, a little click effect that gives the user an impression that the link is being pressed.

Prettyify the Previous and Next Buttons

You may have noticed that the previous and next buttons aren’t styled yet. Let’s take care of that now using some cool arrows. First, let’s get rid of the “prev” and “next” text in the jFlowPrev and jFlowNext spans and replace them with empty divs:

Now let’s style the divs with our button bg and provide hover effects. We are using an image sprite for this to save load time.

The CSS above first provides some style to our slider’s container element and some nice borders on the top and bottom. Next we are styling and positioning the previous and next buttons. Notice we are using cursor: pointer; so the user knows that this is in face a clickable button.

Previous and Next Hover Effects

Now that our slider and buttons are looking pretty good it’s time to add the hover effect. Since we are using an image sprite we can just use background-position on hover to move our background image up to reveal the hover image.

Final jFlow Plus Wrap-up

Now that you have seen some of the capabilities of jFlow Plus it’s time to go ahead and start tweaking with the demo and implementing the slider on your own websites. If you have any question please feel free to contact WordImpress or leave a comment below!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin: