jQuery jFlow Auto Slide and Pause Play Functionality | Modern Web Design Articles and Tutorials

Posted: April 21st, 2010 By: Devin Walker

UPDATE: Please visit the new jFlow Plus article for the latest version's documentation, download and demo.

The following article is no longer supported:

Why jFlow is a Good Slider

jFlow is a very light-weight slider. If you've been using sliders in your web design for some time perhaps you've had experiences with a few jQuery sliders that hasn't been so good. jFlow out-of-the-box is good, but let's make it great. One of the most requested features for this slider is to have the popular pause and autoslide functions.

The jFlow Plug-In

Here's a look at the jFlow plug-in Version 1.2: Notice how there's no coding for an automatic slide feature.

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* jFlow
* Version: 1.0 (May 13, 2008)
* Requires: jQuery 1.2+
*/

(function($) {

$.fn.jFlow = function(options) {
var opts = $.extend({}, $.fn.jFlow.defaults, options);
var cur = 0;
var maxi = $(".jFlowControl").length;
$(this).find(".jFlowControl").each(function(i){
$(this).click(function(){
$(".jFlowControl").removeClass("jFlowSelected");
$(this).addClass("jFlowSelected");
var dur = Math.abs(cur-i+1);
$(opts.slides).animate({
marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration*(dur));
cur = i;
});
});

$(opts.slides).before('&lt;div id="jFlowSlide"&gt;&lt;/div&gt;').appendTo("#jFlowSlide");

$(opts.slides).find("div").each(function(){
$(this).before('&lt;div&gt;&lt;/div&gt;').appendTo($(this).prev());
});

//initialize the controller
$(".jFlowControl").eq(cur).addClass("jFlowSelected");

var resize = function (x){
$("#jFlowSlide").css({
position:"relative",
width: opts.width,
height: opts.height,
overflow: "hidden"
});

$(opts.slides).css({
position:"relative",
width: $("#jFlowSlide").width()*$(".jFlowControl").length+"px",
height: $("#jFlowSlide").height()+"px",
overflow: "hidden"
});

$(opts.slides).children().css({
position:"relative",
width: $("#jFlowSlide").width()+"px",
height: $("#jFlowSlide").height()+"px",
"float":"left"
});

$(opts.slides).css({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
});
}

resize();

$(window).resize(function(){
resize();
});

$(".jFlowPrev").click(function(){
if (cur &gt; 0)
cur--;
else
cur = maxi -1;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});

$(".jFlowNext").click(function(){
if (cur &lt; maxi - 1)
cur++;
else
cur = 0;

$(".jFlowControl").removeClass("jFlowSelected");
$(opts.slides).animate({
marginLeft: "-" + (cur * $(opts.slides).find(":first-child").width() + "px")
}, opts.duration);
$(".jFlowControl").eq(cur).addClass("jFlowSelected");
});
};

$.fn.jFlow.defaults = {
easing: "swing",
duration: 400,
width: "100%"
};

})(jQuery);

jFlow Original Download

jFlow Demo

Recently I put up a demo on my other website wordimpressed.com, you can view it here: jFlow Slider Demo on WordImpressed. Also, be sure to read the newer article I wrote about the jFlow Plus Release.

jFlow Auto Slide

Have you been searching on Google for an easy Auto Slide solution for the jQuery jFlow plug-in? Well, look no more... you have found it. Here's the solution below. Expand to see the code or download it using the link below.

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * jFlow
 * Version: 1.2 (July 7, 2008)
 * Requires: jQuery 1.2+
 */

(function($) {

 $.fn.jFlow = function(options) {
 var opts = $.extend({}, $.fn.jFlow.defaults, options);
 var randNum = Math.floor(Math.random()*11);
 var jFC = opts.controller;
 var jFS =  opts.slideWrapper;
 var jSel = opts.selectedWrapper;

 var cur = 0;
 var timer;
 var maxi = $(jFC).length;
 // sliding function
 var slide = function (dur, i) {
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(opts.slides + " iframe").hide().addClass("temp_hide");
 $(opts.slides).animate({
 marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")
 },
 opts.duration*(dur),
 opts.easing,
 function(){
 $(opts.slides).children().css({
 overflow:"hidden"
 });
 $(".temp_hide").show();
 }
 );

 }
 $(this).find(jFC).each(function(i){
 $(this).click(function(){
 dotimer();
 if ($(opts.slides).is(":not(:animated)")) {
 $(jFC).removeClass(jSel);
 $(this).addClass(jSel);
 var dur = Math.abs(cur-i);
 slide(dur,i);
 cur = i;
 }
 });
 });

 $(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

 $(opts.slides).find("div").each(function(){
 $(this).before('<div></div>').appendTo($(this).prev());
 });

 //initialize the controller
 $(jFC).eq(cur).addClass(jSel);

 var resize = function (x){
 $(jFS).css({
 position:"relative",
 width: opts.width,
 height: opts.height,
 overflow: "hidden"
 });
 //opts.slides or #mySlides container
 $(opts.slides).css({
 position:"relative",
 width: $(jFS).width()*$(jFC).length+"px",
 height: $(jFS).height()+"px",
 overflow: "hidden"
 });
 // jFlowSlideContainer
 $(opts.slides).children().css({
 position:"relative",
 width: $(jFS).width()+"px",
 height: $(jFS).height()+"px",
 "float":"left",
 overflow:"hidden"
 });

 $(opts.slides).css({
 marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
 });
 }

 // sets initial size
 resize();

 // resets size
 $(window).resize(function(){
 resize();
 });

 $(opts.prev).click(function(){
 dotimer();
 doprev();

 });

 $(opts.next).click(function(){
 dotimer();
 donext();

 });

 var doprev = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur > 0)
 cur--;
 else {
 cur = maxi -1;
 dur = cur;
 }
 $(jFC).removeClass(jSel);
 slide(dur,cur);
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var donext = function (x){
 if ($(opts.slides).is(":not(:animated)")) {
 var dur = 1;
 if (cur < maxi - 1)
 cur++;
 else {
 cur = 0;
 dur = maxi -1;
 }
 $(jFC).removeClass(jSel);
 //$(jFS).fadeOut("fast");
 slide(dur, cur);
 //$(jFS).fadeIn("fast");
 $(jFC).eq(cur).addClass(jSel);
 }
 }

 var dotimer = function (x){
 if((opts.auto) == true) {
 if(timer != null)
 clearInterval(timer);

 timer = setInterval(function() {
 $(opts.next).click();
 }, 3000);
 }
 }

 dotimer();
 };

 $.fn.jFlow.defaults = {
 controller: ".jFlowControl", // must be class, use . sign
 slideWrapper : "#jFlowSlide", // must be id, use # sign
 selectedWrapper: "jFlowSelected",  // just pure text, no sign
 auto: false,
 easing: "swing",
 duration: 400,
 width: "100%",
 prev: ".jFlowPrev", // must be class, use . sign
 next: ".jFlowNext" // must be class, use . sign
 };

})(jQuery);

jFlow with Auto Slide Functionality Download

jFlow with Auto Slide and Pause Functionality

Now that you have the slider with auto slide functionality there's a timer that is in effect. Let's take this timer out whenever the user's mouse is outside the slider area. Here's the modified jFlow code below. Download it using the link below.

/* Copyright (c) 2008 Kean Loong Tan http://www.gimiti.com/kltan

 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)

 * jFlow

 * Version: 1.2 (July 7, 2008)

 * Requires: jQuery 1.2+

 */

 

(function($) {



	$.fn.jFlow = function(options) {

		var opts = $.extend({}, $.fn.jFlow.defaults, options);

		var randNum = Math.floor(Math.random()*11);

		var jFC = opts.controller;

		var jFS =  opts.slideWrapper;

		var jSel = opts.selectedWrapper;
		
		



		var cur = 0;

		var timer;

		var maxi = $(jFC).length;

		// sliding function

		var slide = function (dur, i) {

			$(opts.slides).children().css({

				overflow:"hidden"

			});

			$(opts.slides + " iframe").hide().addClass("temp_hide");

			$(opts.slides).animate({

				marginLeft: "-" + (i * $(opts.slides).find(":first-child").width() + "px")

				},

				opts.duration*(dur),

				opts.easing,

				function(){

					$(opts.slides).children().css({

						overflow:"hidden"

					});

					$(".temp_hide").show();

				}

			);

			

		}

		$(this).find(jFC).each(function(i){

			$(this).click(function(){

				dotimer();

				if ($(opts.slides).is(":not(:animated)")) {

					$(jFC).removeClass(jSel);

					$(this).addClass(jSel);

					var dur = Math.abs(cur-i);

					slide(dur,i);

					cur = i;

				}

			});

		});	

		

		$(opts.slides).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

		

		$(opts.slides).find("div").each(function(){

			$(this).before('<div class="jFlowSlideContainer"></div>').appendTo($(this).prev());

		});

		

		//initialize the controller

		$(jFC).eq(cur).addClass(jSel);

		

		var resize = function (x){

			$(jFS).css({

				position:"relative",

				width: opts.width,

				height: opts.height,

				overflow: "hidden"

			});

			//opts.slides or #mySlides container

			$(opts.slides).css({

				position:"relative",

				width: $(jFS).width()*$(jFC).length+"px",

				height: $(jFS).height()+"px",

				overflow: "hidden"

			});

			// jFlowSlideContainer

			$(opts.slides).children().css({

				position:"relative",

				width: $(jFS).width()+"px",

				height: $(jFS).height()+"px",

				"float":"left",

				overflow:"hidden"

			});

			

			$(opts.slides).css({

				marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")

			});

		}

		

		// sets initial size

		resize();



		// resets size

		$(window).resize(function(){

			resize();						  

		});

		

		$(opts.prev).click(function(){

			dotimer();

			doprev();

			

		});

		

		$(opts.next).click(function(){

			dotimer();

			donext();

			

		});

		

		var doprev = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur > 0)

					cur--;

				else {

					cur = maxi -1;

					dur = cur;

				}

				$(jFC).removeClass(jSel);

				slide(dur,cur);

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var donext = function (x){

			if ($(opts.slides).is(":not(:animated)")) {

				var dur = 1;

				if (cur < maxi - 1)

					cur++;

				else {

					cur = 0;

					dur = maxi -1;

				}

				$(jFC).removeClass(jSel);

				//$(jFS).fadeOut("fast");

				slide(dur, cur);

				//$(jFS).fadeIn("fast");

				$(jFC).eq(cur).addClass(jSel);

			}

		}

		

		var dotimer = function (x){

			if((opts.auto) == true) {

				if(timer != null) 

					clearInterval(timer);

			    

        		timer = setInterval(function() {

	                	$(opts.next).click();

						}, 10000);
				

			}

		}



		dotimer();
//Pause/Resume at hover
		$(opts.slides).hover(
		function() {
		clearInterval(timer);
		},
		
		function() {
		dotimer();
		}
		);
	};

	

	$.fn.jFlow.defaults = {

		controller: ".jFlowControl", // must be class, use . sign

		slideWrapper : "#jFlowSlide", // must be id, use # sign

		selectedWrapper: "jFlowSelected",  // just pure text, no sign

		auto: false,

		easing: "swing",

		duration: 400,

		width: "100%",

		prev: ".jFlowPrev", // must be class, use . sign

		next: ".jFlowNext" // must be class, use . sign

	};

	

})(jQuery);

jFlow Auto Slide with Pause Feature Download

Some Extra jFlow Stuff For Ya!

Tip: Notice how we added the code below the dotimer(); call on line 153 before the function's closing "};"


//Pause/Resume at hover
 $(opts.slides).hover(
 function() {
 clearInterval(timer);
 },

function() {
 dotimer();
 }
 );

Now when someone hovers over the slider area the time will not be going because the pause is on. Once the mouse leaves the slider the timer resumes and your slider is not paused.

Extra jFlow Auto Hint: To increase the amount of time it takes to for the image to slide increase the following number:

[/code]

var dotimer = function (x){

if((opts.auto) == true) {

if(timer != null)

clearInterval(timer);

timer = setInterval(function() {

$(opts.next).click();

}, 10000);

}

}

If you like this please comment below! Problems? Contact me or comment below!

Integrity Direct Mortgage Integrity First Financial is an industry leading Mortgage company in Southern California....
WordPress Lavalamp Navigation Tutorial Lavalamp is an awesome jQuery plug-in that makes really cool effects for WordPress-based menus and navigation links, and as a bonus it is very lightweight. It can be a bit tricky to implement in WordPress, but after you read this tutorial hopefully you'll be implementing it with ease. Follow along and let's get your site's [...]...

April 21, 2010
JavaScript, Site News
Auto Slide, jFlow, jQuery, Pause, Slider, Wordpress
Comments Below
Devin Walker
1075 Words

http://bingoblam.com Slingo Slongo

?:|
joethefox

Thank you for your work. I was searching for the pause functionality then I found you.
soto

The link for the jquery.flow.1.2.auto.pUAW.zip file is broken and a demo would be really helpful.
But thanks for taking something good and making it great!
http:/www.dlocc.com Devin Walker

Sorry about that, I just fixed the link… all is good now.
Kyle

I am new to jQuery, and I have one question. I am trying to incorporate an image slider in a SharePoint site. It works fine in the .html file. When I move the code to the web part on the site, however, there are gaps between the images, and the final image wraps to a second row. Am I doing something wrong? Any help would be greatly appreciated. Thanks!
http://www.learningbydesign.biz/2010/ R

I used similar jquey for my slider, my client wants it to go back to the first photo, or not scroll back so quickly. Do you know how I can slow the scrolling after the last is reached so the images are readable, or how to make it just go back to the beginning with no scroll?
deilican

I’m french sorry for my poor english but thanks for the autoplay function, i was searching it, and it works very well.

Thanks.
http://www.jamiewright.net Jamie Wright

For some reason, however hard I try, i can’t seem to get it to work as intended… when including the plugin (with the alternations you’ve made to expand upon it) it doesn’t completely break, all the normal jflow features work, but the auto sliding and pause aren’t working at all.

Is there an example where you’ve got it working that I could look at?

thanks,
Jamie
http:/www.dlocc.com Devin Walker

Hey Jamie,

Check out http://integritydirectmortgage.com, I implemented the jFlow slider there with the auto slide and pause functionality. Let me know if you have any trouble!

Devin
http://www.jamiewright.net Jamie Wright

ok it might have been just me, but as you don’t show the script that holds all the settings, i didn’t realise that you need to set “auto:true”, hence it not working for me! lol

but thanks again for linking me to that mortgage site where i could work out what i’d done wrong dude!

jamie
http:/www.dlocc.com Devin Walker

Oh yeah, I probably should have mentioned that you need to have that argument set on there… I’ll update this article.
Chris

Hey Devin,

Using jquery.flow.1.0.js slider on my site now and I was wondering if you had a fix for a Slide and Pause Functionality
http:/www.dlocc.com Devin Walker

It’s not really a ‘fix’ but the modified version of jFlow on here has auto slide and pause functionality built in. Of course, the pause functionality is only on the mousehover event… you’ll need to tweak it a bit if you want an actual button.
http://www.fachphoto.com Juan

Maybe an example would be great, I understand the code, but I don;t see how to implement it
Ben

Thank you for this great write up! Ive been looking for a place to download the plugin that doesnt lead to a broken link. And what you got here was better coz you also have the other versions that I needed!

Thanks a lot!
http://www.raghibsuleman.com/ Raghib suleman

Thank you for this great HELP!
http://www.raghibsuleman.com/jquery-jflow-slideshow
Brad

Thanks for the tutorial. Any idea if there is an easy way to make the slideshow use a cross fade versus having them slide?

Cheers,
Brad
http://www.hjemmesider.dk Morten

What am I doing wrong the auto is not working.
Look here : http://lilleweb-development.dk/slider/slidewrap.html

???
http://www.hjemmesider.dk Morten

Sorry

You have to use this classes:
.jFlowPrev
.jFlowNext

now it´s working
http:/www.dlocc.com Devin Walker

Glad you got it twerked out! :]
Carl

Hi! Love this script. Is it possible to get the slider to loop directly to the first slide instead of rewinding?
Niloc

In the original code and this modified code i miss one extra line of code:
if (dur==0) dur = 1;

inserted after the line: var dur = Math.abs(cur-i+1);

so it will also animate properly when moving forward.

jflow is great.. and readable.. nice work with this extension
http://www.smirlwebs.com/photography/index.php Alex Williams

Hi

I am having loads of trouble trying to put multiple sliders on one page.

I’m actually trying to put sliders inside of sliders which isn’t probably a good idea.

Do you know how I can solve this problem?

The site is http://www.smirlwebs.com/photography/portfolio.php

Thanks
Raphael

Thank’s for this autoscrolling jFlow.
http:/www.dlocc.com Devin Walker

No Problem!
http:/www.dlocc.com Devin Walker

A Slider within a Slider?!
http:/www.dlocc.com Devin Walker

Thanks for the contribution
http://www.smirlwebs.com/photography/index.php Alex Williams

I got it sorted now. Thanks
Andy

Is it possible to get the slider to loop directly to the first slide instead of rewinding?
http://whistlephone.com Andy G

Any way to change the transition speed? I’m looking for a nice, calm and smooth slide.

Excellent Plug in BTW!! Are web team is loving it.
mssbee

Thank you for the scripts and the tutorial.
http:/www.dlocc.com Devin Walker

You’re Welcome!
Andie

Hi Devin,

Thank you very much, this is exactly what I’ve been looking for. I was about to dump the old jflow just because of the lack of the autoscroll and pause functionality.
Carl

Is it possible to get the slider to loop directly to the first slide instead of rewinding?
http:/www.dlocc.com Devin Walker

Hey No Problem! Glad to help
Mauricio Fragale

Hey! GREAT WORK! It’s exactly what i was looking for. But is there a way to put larger pics? Because no matter what size of foto i put, it stays the same size..
http:/www.dlocc.com Devin Walker

Yes you can put larger pictures, that’s not a problem with the jFlow slider.
Su

Thank you for the nice script.

I would like to set a timeout for the text. The Picture should come in first and then text with a little delay.

Can anyone tell me, where I have to put the timeout within the script?

Thanks in advance
Ahsan

Hey, Could you guide me how to put multiple sliders in a page? Thanks
http://www.dezignwhiz.com DezignWhiz

Thanks Devin, It’s exactly what I am looking for!! Right now, the pause works on mouse hover. Can I also add a Pause/Play button similar to the prev and next buttons?
http:/www.dlocc.com Devin Walker

Yes this is very possible, if you know a bit of jQuery and html you can modify the default onHover to onClick for a button
http:/www.dlocc.com Devin Walker

This is a rather complex process. I suggest you use a slide like Anything Slider over at CSS-tricks if you want something that can handle multiple sliders on one page.
http://pedroserpa.com Pedro Serpa

Hi! This plugin is very useful.
However, how do I invert its direction when the loop finishes, instead of going straight to the beginning?
I really would like to know how to do this for a project I’m working at right now and the client is bugging me about that.

Thanks in advance.
http://music.jeezjaz.com ฟังเพลง

i like this

thanks
http://zforcedesign.com Mike Ziolkowski

Thanks a ton, works like a champ, took some time to figure to set auto to true but now it works great thanx
Mike

How can I change the direction ? I’m using JFlow in a calendar and i want the firs image to be the last image added (i.e. current month)
http://danielvaillancourt.com Dan

Hi, any way to makin it fade instead of sliding ?

THX
http://www.philipdahl.com philip

This is exactly what I needed!!!! Thanks!
Jim Weaver

I have 8 slides I’m presenting with jFlow for multiple groups. Some groups only have data on 6 of the 8 slides. Is there a way to “auto-next” if I determine the slide has no content? Something like (if SQL ROWCOUNT = 0, then AUTO-NEXT?)
http://www.lasmelidas.org Wilfredo Noyola

Hi friend by the contribution:
I have a question:
I want to display in the 3 slide index.php at once?
“The first to move quickly slide
“The second with a time less than the first
“The third party does not move.

What I can, do …. I have tried several days but does not come out, the only thing I could do is move all three at once …
Well you can review the pages here I am http://www.lasmelidas.org implemented …
I hope you can help me ….
Thanks … Good day!
blink26

Hi ,

Very nice slide, but how can i manage to auto stop at the end of the slide ?

Thanx
christina

hi how do you make the images loop, instead of rewinding to the beginning?

thanks,
Chris
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
http://www.patrickmaciel.com.br Patrick Maciel

Oh!
Thanks so much my friend
You save my life (auto change)
Mihail

HI! Nice tutorial.

how to add a play pause button?
Gabriel Rodriguez

Thanks, you saved me an hour of work!
J4jameel

I am new to jQuery so here is a basic question, how can i stop sliding banner on click of controls ( 1, 2 ,3 )
http://linkoblast.blogspot.com/ LinkOblast

Excellent Solution…!!

Really like it…thanks mate.
Matthew

seems to be a problem with jflow2
http://warrington.com/ - try pressing next multiple times. Any ideas?, seems to loose its position and go blank