jFlow Plus: Auto Slide and Pause Demo and Tips

7:43:00 AM |

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.

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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jFlow Plus</title>
</head>
<body>
<!-- jFlow content will eventually go here -->
</body>
</html>

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:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jFlow Plus</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.js" type="text/javascript"></script>
</head>

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 opening tag:
<div id="container">
 
<div id="mySlides">
   <div id="slide1"><img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
        <span><h3>Welcome to the First Slide!</h3><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
   </div>
   <div id="slide2"><img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
        <span><h3>Hey you made it to the Second Slide!</h3><p>We Know you enjoy this plugin... it's not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
   </div>
   <div id="slide3"><img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
        <span><h3>Woah You're on the Third Slide</h3><p>You've completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>    
   </div>
</div>
 
<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>
 
<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>
 
</div>
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:
<script language="javascript">
	$(document).ready(function(){
	    $("#myController").jFlow({
			controller: ".jFlowControl", // must be class, use . sign
			slideWrapper : "#jFlowSlide", // must be id, use # sign
			slides: "#mySlides",  // the div where all your sliding divs are nested in
			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			width: "800px",  // this is the width for the content-slider
			height: "350px",  // this is the height for the content-slider
			duration: 400,  // time in miliseconds to transition one slide
			prev: ".jFlowPrev", // must be class, use . sign
			next: ".jFlowNext", // must be class, use . sign
			auto: true	// true or false
    });
});
</script>

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.
<link href="styles/jflow.plus.css" type="text/css" />

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.
#slide1 span, #slide2 span, #slide3 span {
	background: url("../images/contentBg.png") repeat top left transparent;
        position: absolute;
	bottom: 20px;
	right: 20px;
}
or you can simply:
.jFlowSlideContainer span {
	background: url("../images/contentBg.png") repeat top left transparent;
	position: absolute;
	bottom: 20px;
	right: 20px;
        padding: 10px;
}
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.
#slide1 h3, #slide2 h3, #slide3 h3 {
	font-family: Georgia, serif;
	color: #FFF;
	font-size: 35px;
	font-style: italic;
	margin: 0 0 10px 0;
}
 
#slide1 p, #slide2 p, #slide3 p {
	font-family: Georgia, serif;
	color: #FFF;	
	margin: 0;
}
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.
.jFlowSlideContainer a {
	color: #F90;
	text-decoration: none;
	font-style: italic;
}
.jFlowSlideContainer a:hover {
	text-decoration: none;
	border-bottom: 1px dotted white;
}
.jFlowSlideContainer a:active {
	position: relative;
	top: 1px;
}
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:
<span class="jFlowPrev"><div></div></span>
<span class="jFlowNext"><div></div></span>
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.
/* your overall slider container */
#container {
	width: 800px;
	height: 350px;
	position: relative;
        /* css border on top and bottom */
        border-top: 5px solid #999;
	border-bottom: 5px solid #999;
}
 
.jFlowNext div {
	background:url("../images/arrows.png") no-repeat scroll 0 -35px transparent;
	height:130px;
	position:absolute;
	top:110px;
	right: -50px;
	width:50px;
	cursor:pointer;
}
 
.jFlowPrev div {
	background:url("../images/arrows.png") no-repeat scroll -84px -35px transparent;
	height:130px;
	position:absolute;
	top:110px;
	left: -50px;
	width:50px;
	cursor:pointer;
}
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.
.jFlowPrev div:hover {
	background-position: -84px -235px;
}
 
.jFlowNext div:hover {
	background-position: 0px -235px;
}