Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin

May 16th, 09 by Dicky | 135 Comments |
Delicious 182 hits
You maybe interested in our latest article 75 Beautiful Valentine Wallpapers.

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.

content-slider

So, let’s start to create our content-slider now. Download both jQuery and jFlow before you proceed.

  1. 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; }
  2. 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>
  3. 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.

  4. 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.

  5. 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.

  6. 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.

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.

Comments

  1. The best thing about your website blog is that your tips are working!
    very very useful! Thank u!

  2. That was simply the best post . I will keep visiting your blog so keep them coming

    :)

  3. Johnson Koh says:

    Very useful technique. Will find a chance to use it.

  4. Jason says:

    Any way this can scroll through automaticly, rather than having a user manually scroll through them?
    Thanks.

  5. lionel valero says:

    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.

  6. Alex says:

    Could you send me the auto scrolling version too please!

  7. Alex says:

    Quick note to those using the auto scroller, don’t delete the next and back buttons it needs them! Just display:none instead

  8. Alex says:

    Is there any way to “pause” the timer on mouse over #slides and continue on mouseout?

    • dicky says:

      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!

  9. Neil says:

    Hello – v. good site.
    I would really like to try the auto scrolling version of this too!
    Many thanks

  10. Bjorn says:

    Great job with this. Can you please send me the auto scroll version.
    Thanks.

  11. Nicky says:

    Hey , This is great!!

    could you please send me the autoscroller one as well?

    I’d really appreciate it!

    Thank you

  12. Barton says:

    Hi,
    could I please request the AutoScroll code version.
    Great tutorial, thanks,
    Barton.

  13. 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?

  14. melvin says:

    this is really helpful, thank you!
    oh could you send me the auto scrolling version!

  15. Marc Falk says:

    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

  16. Hiroshi says:

    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.

  17. dicky says:

    Hi Hiroshi and mahir,
    I had sent the auto scroll version to your inbox. Enjoy it! :)

    • Hiroshi says:

      Works great :)

      Thanks so much for the speedy reply.

      I think you really have something here, so keep up the great work.

      Cheers!

  18. Gil says:

    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!

  19. 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!

  20. Mr Pappas says:

    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!!

  21. Oscar says:

    I need the auto scroller to, could you put up a link so everyone could use it?

  22. Mr Pappas says:

    Smashing! Thanks for helping everyone out :)

  23. zak says:

    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 ?

  24. Maarten says:

    great tutorial, i’m now modified the code for working with wordpress

  25. Dicky says:

    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!

  26. Cy says:

    Thanks!

    The html works perfect, but when I try to use the code in Wordpress it doesn’t work.

    Any ideas?

  27. Fred K says:

    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!

  28. Cy says:

    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!

    • Dicky says:

      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 :)

      • westy says:

        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.

  29. Maarten says:

    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

  30. Dave says:

    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

    • Dicky says:

      Hi Dave,
      I had updated the article to include the auto version.

      Thanks.

      • Dave says:

        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.

  31. Liviu says:

    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!!

  32. Zeki says:

    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

  33. John says:

    How/where do you specify the amount of time a slide stays in place before it transitions to the next slide?

  34. Bata says:

    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!

  35. Thomas says:

    Hi,

    is there a way to place a direct link i.e. to slide 3 of the container?

    Thanks
    Regards
    Thomas

  36. Steve says:

    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

  37. 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/

  38. phil says:

    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

  39. mgsmus says:

    Great tutorial! Thanks.

    and this is from me for auto version:

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

    function() {
    dotimer();
    }
    );

    • westy says:

      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?

  40. monaye says:

    Great!! I was looking for auto scroll of jFlow and found you’re modification version. It’s working great!! Great Work!!

  41. simmo says:

    Hey, is there any way 2 have two sliders within the same page?

  42. Avinash says:

    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.

  43. Eric Barb says:

    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!

  44. Roy says:

    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

  45. nycpicasso says:

    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!!

    • nycpicasso says:

      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.

  46. westy says:

    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.

  47. Mariona says:

    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!

  48. divbox says:

    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

    • Dicky says:

      Hmm… I don’t think we can do this with jFlow. Probably you can achieve this result with other jQuery plugin. :)

      • divbox says:

        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.

  49. 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

    • moshe says:

      yes, i am seeing this too – in IE7 – both on this website and in the downloaded files.

      is there a solution for this?

      Thanks!

  50. moshe says:

    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!

  51. Jay Yaskiw says:

    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 ?

  52. André says:

    Don’t work in Internet Explorer. IE show the first slide but the other slides do not show.

    Someone resolves this problem?

  53. Lee says:

    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.

  54. phil says:

    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.

  55. Lewis says:

    can I have the autoscroller also? can you email to me?

    THanks

  56. mark says:

    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.. :)

  57. Zain says:

    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.

  58. Gabriel says:

    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):

  59. Gabriel says:

    Somehow couldn’t post HTML code, but please help me out here:

    http://i47.tinypic.com/k02add.jpg

Trackbacks

  1. Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin | Design Newz
  2. CSS Brigit | Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
  3. tripwire magazine | tripwire magazine
  4. The Technology Post for May 21st - Jason N. Gaylord's Blog
  5. 7 Excellent JavaScript Content Sliders
  6. 15 jQuery Plugins For A Better Photo Gallery And Slideshow
  7. 15个最佳jQuery幻灯插件和实例| Ajax| 前端观察
  8. Ücretsiz Jquery Slider İçin En İyi 15 Örnek « Bay Bedava – Netten Başlıklar
  9. 12 Easy-to-Implement jQuery effects for your Website « Web Design / Development Blog :: Alt Creative
  10. The best tutorials combining HTML,CSS,PHP and JQuery | blogfreakz.com
  11. 13 Super Useful jQuery Content Slider Scripts and Tutorials | Web Design Ledger
  12. Slider Scripts & Tutorials – jQuery | Lamiani Project
  13. 13 Super Useful jQuery Content Slider Scripts and Tutorials | huibit05.com
  14. Ücretsiz en iyi 15 jquery slider manşet haber | e-dunyam.com
  15. 40+ Fresh And New jQuery Plugins Of Slider’s And Gallery’s - Themeflash : One Stop For All Your Web Resources
  16. 13 Super Useful jQuery Content Slider Scripts and Tutorials | Downrex
  17. 13 tutoriels de slider jQuery | WebCssDesign
  18. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic!
  19. 网页色妓个人网站-网页前端-网页设计 » 15个常用jQuery滑动插件和教程
  20. Outpus • Soloaga Designs » 13 tutoriais para fazer Slideshow e Carrossel com Jquery
  21. jQuery Blend | WebDesignExpert.Me
  22. A Fresh Start of 2010 « Floating Reverie
  23. SlideDeck – Cool jQuery Plugin For Slideshow | Afif Fattouh - Web Specialist
  24. 10 Useful jQuery Slider Tutorials - InterworkLabs

Leave a Comment