Advertisement
There are a lot of free scripts to create a content slider. One of the example is SmoothGallery by JonDesign. But, if you are using jQuery and don’t want to install another JavaScript library, then you may need to consider jQuery slider plugin.
Today, i am going to provide a tutorial on using jFlow, a minimalist jQuery plugin to create a content slider. Readers are required to have basic XHTML/CSS and JavaScript skills. I will provide a download link after this tutorial. This is the first tutorial post on WebDesignBooth, and i will write more tutorials in future.
So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.
- Create a style.css file, and insert the following code into the file:
#jFlowSlide{ background:#DBF3FD; font-family: Georgia; } #myController { font-family: Georgia; padding:2px 0; width:610px; background:#3AB7FF; } #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; } .slide-wrapper { padding: 5px; } .slide-thumbnail { width:300px; float:left; } .slide-thumbnail img {max-width:300px; } .slide-details { width:290px; float:right; margin-left:10px;} .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; } .slide-details .description { margin-top:10px; } .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; } .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; } - Open your main document and include the style.css, jQuery, and jFlow in the <head> tag.
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script> <script language="javascript" type="text/javascript" src="jquery.flow.1.2.js"></script>
- Then add this simple JavaScript code to define the settings for jFlow
<script type="text/javascript"> $(document).ready(function(){ $("#myController").jFlow({ slides: "#slides", // the div where all your sliding divs are nested in controller: ".jFlowControl", // must be class, use . sign slideWrapper : "#jFlowSlide", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign width: "610px", // this is the width for the content-slider height: "235px", // 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 }); }); </script>Think #slides as a container, which contain all slides, while .jFlowControl is the controller which let us go to the individual slide. As you can see from the style.css, we have 300px .slide-thumbnail to display our image, 290px .slide-details to display our title and description. Besides these, we have 10px margin-left for the .slide-description and 5px padding for the .slide-wrapper. So totally we need 610px width. For the “height” setting, you need to estimate the maximum height for your content. Here, i will use 235px as an example.
- Now is the turn to create the individual slide. The slide is contained in the #slides div. Here, i will conly show one slide. You may refer the source code for more info.
<div class="slide-wrapper"> <div class="slide-thumbnail"> <!-- image here --> </div> <div class="slide-details"> <h2><!-- title here --></h2> <div class="description"> <!-- description here. --> </div> </div> <div class="clear"></div> </div>We will wrap everything in a .slide-wrapper class, and float our thumbnail to the left while our content to the right. Don’t forget to clear the floats also. Replace image, title, and description with your own content.
- After that, we may add controls to the slides, which are resides in a #myController div.
<span class="jFlowPrev">Prev</span> <span class="jFlowControl">1</span> <span class="jFlowNext">Next</span>
The .jFlowPrev and .jFlowNext are necessary controls to go to previous and next slides, while .jFlowControl is a “button” to jump to any particular slide. The number of .jFlowControl span is depends on the number of slides you have.
- That’s all!! We had done everything. You can view the demo or download the source code to use in your own project.
Update:
You may download the auto scroll version here.
The best thing about your website blog is that your tips are working!
very very useful! Thank u!
That was simply the best post . I will keep visiting your blog so keep them coming
Hi, thanks for your visit. You have a nice site too!
Very useful technique. Will find a chance to use it.
Any way this can scroll through automaticly, rather than having a user manually scroll through them?
Thanks.
Hi Jason,
The jFlow plugin doesn’t support auto-scrolling, but i have a modified version that support auto-scrolling. Contact me if you want the auto-scrolling version.
Thanks.
Hello,
I am interested by the auto scoll version as well.
Regards.
would love the auto-scrolling feature! can you send it over pls? thank you in advance.
Hi Frankie,
I had included the auto version at the bottom of the post.
Hi, i want the auto scrolling version, can you email=it to me?
I had sent to both of you. Check your email.
Thanks.
Hey, great work but any chance i can get the modded script also? thx
Hi, i had sent you the file. check your mail and feedback here if you found any problem.
May I please have the auto scrolling version as well? I really appreciated it.
Hello,
Really great great script!! May I have the modded autoscroll script also? Thank u guys!!!
Ooops didn’y see you posted it already
I only looked at the bottom of the page not the bottom of the post…sorry 
may i get the auto scrolling version as well? thanks!
I need that auto scroller too ASAP! And is there any way to make it scroll left to right?
would love the autoscrolling version! thank you!
i need auto scrolling jflow can you send me
Hi Jason
can i have the modified file please i was working with it and hoped it has auto scrolling
thanks in advance
Please can anyone send me the auto scroll version…
thank’u very mutch guys
Hello,
I integrated jflow and that one :
http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/
on the same page, quite surprisingly, when jflow slides it resets the drilldown menu to inintial state.
Here is an example :
http://www.polymtl.ca/gch/Outils/concept-green/index_fg.html
Best regards,
Lionel.
Could you send me the auto scrolling version too please!
Quick note to those using the auto scroller, don’t delete the next and back buttons it needs them! Just display:none instead
Hi Alex,
Thanks for pointing this out. I never remove the prev and next buttons, so i am not aware of this problem.
Is there any way to “pause” the timer on mouse over #slides and continue on mouseout?
I think the jFlow developer don’t include pause feature. If you want more advance features such as the “pause”, you may go to this plugin: jCarousel Lite, i think in the future i will write 1 tutorial which related to it. Anyway, thanks for you visit and valuable comments, really appreciate it!
Hello – v. good site.
I would really like to try the auto scrolling version of this too!
Many thanks
Great job with this. Can you please send me the auto scroll version.
Thanks.
Hey , This is great!!
could you please send me the autoscroller one as well?
I’d really appreciate it!
Thank you
Hi,
could I please request the AutoScroll code version.
Great tutorial, thanks,
Barton.
Hi,
Could I please request the AutoScroll code version. And is there a way to make it slide left to right instead of right to left?
this is really helpful, thank you!
oh could you send me the auto scrolling version!
Hi, thanks for the tutorial, it is nice. I love light-weight, and jflow surely is.
I would very much like a version of the autoscroller too, so I would be very happy if you could send me a copy too. Thanks
Cheers,
Marc
Hi,
I had sent the jFlow auto scroll version to you. Thanks for your visit and support.
Fantastic tutorial. Please keep these cool tricks coming.
I’d love to get a copy of the auto scroll version. Please email it to me when you have a minute.
Cheers.
Hi Hiroshi and mahir,
I had sent the auto scroll version to your inbox. Enjoy it!
Works great
Thanks so much for the speedy reply.
I think you really have something here, so keep up the great work.
Cheers!
Hi, very nice tutorial, great script, and awesome and useful website you have here!
I really like the effect of this script, but the autoscroller version could be handy! Could you please send to me too?
Thanks a lot!
Hi,
I had sent the auto scroll version to you. Thanks!
This is exactly what I needed, Thank you! I was hoping to get a copy of the auto scrolling version as well, seeing I need that for a site I am currently working on.
Thanks again and great work!
Thank YOU for the tutorial. This was exactly what I needed and explained for those of us who know a bit of code but are not programmers.
Could I also please get the modded auto-scrolling text? I think on AJAX I might be able to figure it out but JQUERY is new to me. Thanks!!
I need the auto scroller to, could you put up a link so everyone could use it?
Smashing! Thanks for helping everyone out
Love this slider script! I have one issue and it’s kill’n me.
I’ve modified this a bit so that it’s only sliding through thumbnails and displays 3. For some reason it works great in FF / Safari, but IE will display the first slide then clicking on any other slide will cause all slides to fly by and display nothing. :/
regarding the CSS I have tried all kinds of things and it’s not much different at all than the source really aside from thumbnail width.
Any ideas ?
great tutorial, i’m now modified the code for working with wordpress
Hi, for those who request for auto scroll version, please download from the bottom of the article. I had updated this article to include the link to the auto scroll version.
Thanks!
Thanks!
The html works perfect, but when I try to use the code in Wordpress it doesn’t work.
Any ideas?
Hi Dicky. Great howto, it’s super easy to implement, and the auto-function is a great addition. Just one question: I’m trying to modify the layout of the slider to have the controller floated left and the slides parent floated right, side by side as it were. CSS-wise that’s no problem but the slides stop working properly when I do this — only the last slide is visible. Seems there’s something in the script construction that makes it impossible to have the controller anywhere else except above or below the slides? Is this correct, and if so, can you maybe suggest how to make a two-col layout work? That would be much appreciated. Thanks!
Seems to be great. I downloaded the files and the html is looking awesome, however I tried to implement the code in WP 2.8 and is not working. Do you know of any incompatibility or any reason why is not working?
Thanks!
I think maybe this is due to the WP2.8’s jquery version. I haven’t try it on 2.8 so i can’t comment much. But it works well with 2.7
My solution (though probably not the best) was to load the slider through an iFrame. You don’t notice the iFrame with some styling. But more importantly, I didn’t have to find the conflicts with Wordpress and/or plugins.
I have it work with 2.8 look at http://beta.maartenschraven.com it is still beta and works only on mac but it is working perfect.
If you want i can give the code here. The problem is the order of the tags and look if wordpress dubble load jquery.
WP2.8 has its own jQuery load. If i can help let me know
Is there any change we could see the auto-slide version.
Is it availble for download anyway?
Really woulld like to see/use it.
Thanks,
Dave
Hi Dave,
I had updated the article to include the auto version.
Thanks.
Ok, thank you very much!
That was an easy one for me…
I didn’t noticed there was an updated version of it.
I’ve downloaded the script and definitely give it a try. Allthough i found this morning an other slider wich is easier to position certain elements. But yours is running a bit smoother… i have a dilemma right now :S
Thanks Dicky.
Hi man, very very well explain, is there any chance that I can get the auto scrooling version? I read above that you send to some people!
Many Thanx!!
Hi Liviu, I had updated the article to include the auto scroll version.
Hi,
Many thanks for this lovely tutor.
Is there documentation or how-to to place two or more jflow on one page?
Thanks alot
Zeki
How/where do you specify the amount of time a slide stays in place before it transitions to the next slide?
FYI I’m using the auto scrolling js file. TIA!
Hi John,
Yes, you can modify the amount of waiting time. It is at line 149 of jquery.flow.1.2.auto.js. The default value is 3000(ms).
Hope you enjoy using the script.
Hi! Thanks for the tutorial! I have a problem: I cannot place more than 1 slider content in one page, it doesn’t work. Someone knows how to do? I need to place at least 3 sliders contents. thanks!
Hi Bata,
Forgive me for the delay in replying you. Could you send me your code, so that i can help you to look into this issue?
Hi,
is there a way to place a direct link i.e. to slide 3 of the container?
Thanks
Regards
Thomas
Thanks for producing this fabulous script… great script to add to my arsenal!
Everything installed smoothly, took about 5 mins. My only dilemma is when I scroll my web-page down to your sliding script it twitches my page backround.
Also… when it twitches, I can vaguely see a silhouette of the sliding panel either on the left or right side of the page depending on the side it’s sliding content to.
My site is a “centered” design @ 780px wide.
Any thoughts as to why this is happening?
Thanks
Steve
Hi Steve,
Can’t really get what you mean? Do you have any screenshot for this issue?
Nice one mate. I have also added the link to your post in my Ultimate
collection of top jQuery tutorials, tips-tricks and techniques to improve
performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-
tutorials-tips-tricks-techniques-to-improve-performance/
Nice tuts. I wonder if it works if I put in some divs and images inside of each slide div. Kind of like putting a whole bunch of elements.
Hi Edwin,
Yup, it should be able to work.
Thank you for the great resource. I have built a version of this and it works great, except for the fact that the auto scroll isn’t working. I downloaded the auto scroll version of the jslide file but it isn’t auto scrolling. Is there something I need to do to make this work.
Also, I don’t need the resizing thumbnail feature for the images, is there any code I can trim since I’m not using this.
Here is a link to it if that’s helpful
http://www.jalc.edu/contentslider/content_slider_test.htm
I figured it out. Had to switch auto: false to true.
Great tutorial! Thanks.
and this is from me for auto version:
//Pause/Resume at hover
$(opts.slides).hover(
function() {
clearInterval(timer);
},
function() {
dotimer();
}
);
All great stuff! With the auto scroll included, this is great. Very easy to tweak with css to suite my needs.
Where would I insert this bit of code to pause on hover?
Nevermind, I got it. For those doing the same, I placed it after the dotimer(); call on line 153.
Thanks guys !! Exactly what I was looking for. No hover on auto was bugging me for quite some time – now my work got a lot, lot easier
Hi,
I dont know what to do to have auto scroll? I donloaded jquery.flow.1.2.auto.js and linked in the head , but it doesnt work. Can you tell me what to do?
Thank you
Hi,
I got to work
Thank you for it!
How?
I can’t get the auto scroll to work with the jquery.flow.1.2.auto.js. I have it set to true in case anyone was wondering.
Great!! I was looking for auto scroll of jFlow and found you’re modification version. It’s working great!! Great Work!!
Hey, is there any way 2 have two sliders within the same page?
Hi simmo,
Should be able to have 2 sliders, but i never try before.
Hi,
a good post. However I wanted to know what if I don’t want the controller and want my scroll to happen from my own specified buttons. As i have a situation where i want to build a wizard using this and enable users to scroll on clicking on buttons like continue after they fill a particular form fields. Currently I am using ur classes and keeping ur controller hidden in the html as when i remove it the slider stops to work.
Please help.
Hi Avinash,
I am not sure on how to do that, maybe you can share your code with us?
Great tutorial. I’m setting this up on a test page, and plan to use in production soon. Very exciting as a first time jquery user
Well written and easy to follow I might add!
Hi, I like this plugin and have used it in one of my WordPress themes. But have question, how can I temporarily hide the slider, so it does not “flash” on the page as plain HTML. Need your help,
Roy
Hi Roy,
What do you mean by “hide” the slider?
Great tut! I have been looking for this for some time now. Here are my questions.
1. I made my own graphic buttons with an up and an over state and I would like to use them and not have the next & prev buttons, is this possible and how would I do it?
or
2. I have tried to raise the controller up on to the slider level but it falls behind the slider and you cannot see it or use it, how can I get it on top so that it can still be used? I tried to move the over the but that didn’t work.
I don’t have it up live for you to see yet since I am redesigning my site but I can send you a screen shot of what I want it to look like.
Thanks
Once again, Great tutorial!!
I am not sure how this part didn’t go thru on my above 2nd question but this is how it should have read.
I tried to move the div id=”myController over the div id=”slides but that didn’t work.
My last obstacle to conquer is starting on a random tab. Any ideas on that? Sigh, would be so easy with Actionscript, but Flash is… well… Flash.
Hi westy,
I have no idea on how to start with a random 1. But seems like jFlow doesn’t support this feature…
Would you be able to help me to tweak the code to stop the auto slider into manual mode once the user clicks the numbers?
I used the pause on hover code that was posted here and it works great but I would love to be able to achieve the same effect that this sites achieve. I have checked their code and it looks like it is from the old jQuery (1.2.6) library and would not be compatible with the 1.3.2.
Thanks so much in advance!
Hi Mariona,
The script should be able to work with 1.3.2. But i have no idea on how to stop the auto slider once user clicks the number…
thank you for the script! it’s great! is there a way, when on auto scroll, or when user clicks the next on the last image, it goes to the first in the list, but not by going back through the slides it has already gone through. to prevent it from going backwards to get to start again.
thanks!!
div
Hmm… I don’t think we can do this with jFlow. Probably you can achieve this result with other jQuery plugin.
thanks for the pointer and fast reply!!!
i used the cycle plugin to get desired effect. this cycles the DIV’s from start to beginning and back to start. it also has play/resume buttons which i also needed.
i had to bypass using the “auto start” feature of the jFlow plugin and use cycle’s auto start to get the play/resume buttons to work.
Working on a site now, and in IE the slider slides waaayyy past the content, any suggestions?
http://www.mgiweb.net/test/lcf/default.html
yes, i am seeing this too – in IE7 – both on this website and in the downloaded files.
is there a solution for this?
Thanks!
ok – weird question here: i know that this is called a “slider” – but how easy is it to modify this so that the slides fade out and in instead of slide ??
Thanks again – great script!
Hey Guys,
I installed the program exactly as it said on the website and I also have copied the demo very closely.
I keep a having a problem where there is a scroll bar on the right side and bottom of each individual slide. Its weird , is there anything I need to tweek to get it to work ?
Don’t work in Internet Explorer. IE show the first slide but the other slides do not show.
Someone resolves this problem?
How would I go about setting a default slide? I have 3 slides and want the middle one to be the first one displayed.
Cheers for the fantastic lightweight slider.
I have this working on my site, and it is great. Thanks so much for making this available. However, I have this problem that every once in a wile, my browser shows all of the slides for several seconds before the styling kicks in. I don’t think it is the size of my pictures, because they are fairly small, and as I said, it doesn’t happen every time. Has anyone else had this problem, and is there a way to deal with it. Click on my website to see what I am talking about. It seems to happen more frequently in Firefox. Thanks again.
by the way, the website is http://www.jalc.edu
can I have the autoscroller also? can you email to me?
THanks
this is perfect for my current project!
I have tried to mimic the autodesk.com slider effect using jquery (they’re using flash)… i have tried for several hours but failed.. this one made my headache gone and got me excited 
thanks a lot, this post made my day! a few tweaking is needed though such as adding transparency and float the navigation on top of the image.. 
Great widget!
Since I’m a Blogger.com user .. I’ve Bloggerized
this simple slider.
http://www.tipsotricks.com/2010/01/addinstall-simplest-jquery-featured.html
Hope you would like this.
I need help with my controller.
When I try to add background code to the controller (span) it stops to work; it seems it only accepts ?
Working code:
Not working code (wrapped in , why does it stop working? I tried …, didnt work either):
Somehow couldn’t post HTML code, but please help me out here:
http://i47.tinypic.com/k02add.jpg
What’s up with your table code? Where did those tags come from?
Maybe you should try to remove them…