jQuery Plus Verion 2

jFlow Plus is a compact slider (~4kb minified) with multiple effects and configurations that is cross-browser compatible and actively developed on by the open source community.

Click to view the jFlow Demo

Why Should You jFlow?

There are many sliders on the Internet to chose from, so why this one? Good question. First, let’s start with simplicity. A lot of jQuery slider plugins take an experienced developer to setup, not jFlow. We’ve got a superb demo for your to reference, download and implement. Novice web developers can get this puppy up and running in no time. What else you ask? Here’s a brief summary:

  • Simple to setup
  • Cross-browser Compatible
  • Compatible with latest version of jQuery
  • Open Source and Community Supported
  • Actively Developed
  • Good Documentation and Support
  • and many more…

Help with Your jFlow

Planning on using jFlow for your next WordPress site? Great! Here’s a few tips to get your started quickly:

  • Visit the Demo
  • Start with the demo CSS and style to your liking
  • If you’re stuck, please read the documentation on GitHub
  • Start with the basic functionality and then modify to suit your needs

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:

99 Responses to “jFlow Plus v2 – A Compact jQuery Slider”

  1. Sai@Dailyblogtools.com

    wow this slider is really looks very nice ūüôā

    Reply
  2. Sai@TechGenra

    wow this slider is really looks very nice ūüôā

    Reply
  3. rizk

    broken link.. what should i do? can i get from github?

    Reply
  4. rizk

    broken link.. what should i do? can i get from github?

    Reply
  5. Zurd Zurd

    Thanks for the link for v2, couldn’t download it last week, works perfectly fine. However, the duration variable only works with rewind and not flow. I’d love to have a duration with the flow effect. Is there anyway to make it work?

    Reply
    • Devin Walker

      Thanks for bringing this bug to my attention.  Will put it on the fix list.

      Reply
      • John Stinson

        has there been a fix to the duration with ‘flow’? ¬† didn’t want to be pushy, just wanted to make sure i hadn’t missed it.

        also, in rewind, it rewinds to a blank slide after reaching the last slide.  any solution for that?

        Reply
  6. Zurd Zurd

    Thanks for the link for v2, couldn’t download it last week, works perfectly fine. However, the duration variable only works with rewind and not flow. I’d love to have a duration with the flow effect. Is there anyway to make it work?

    Reply
    • Devin Walker

      Thanks for bringing this bug to my attention.  Will put it on the fix list.

      Reply
      • John Stinson

        has there been a fix to the duration with ‘flow’?¬† didn’t want to be pushy, just wanted to make sure i hadn’t missed it.

        also, in rewind, it rewinds to a blank slide after reaching the last slide.  any solution for that?

        Reply
  7. etipaced

    Thanks for providing this plugin. It’s working great for me! I’m wondering how I can configure/extend it to pause on click? In other words, the slide show automatically advances, but I want it to stop auto-advancing when I click the little thumbnail/buttons. Any help is greatly appreciated!

    Reply
    • Devin Walker

      When a user clicks forward or backwards through the slides you want it to stop the auto-slide functionality?  Is that right?

      Reply
      • etipaced

        Yes that’s correct. Sorry for the late reply. I never saw the email reminder for some reason.

        Reply
  8. etipaced

    Thanks for providing this plugin. It’s working great for me! I’m wondering how I can configure/extend it to pause on click? In other words, the slide show automatically advances, but I want it to stop auto-advancing when I click the little thumbnail/buttons. Any help is greatly appreciated!

    Reply
    • Devin Walker

      When a user clicks forward or backwards through the slides you want it to stop the auto-slide functionality?  Is that right?

      Reply
      • etipaced

        Yes that’s correct. Sorry for the late reply. I never saw the email reminder for some reason.

        Reply
  9. vanity sink

    Ya!I have a  goal  feedback here with have a nice writing.I am glad to read it.

    Reply
  10. 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. This happens on your site too. Press back forward multiple times. Seems to  occasionally  loose position by itself and go blank also

    Reply
    • etipaced

      I can confirm this is happening for me too. See http://www.integratedbyaardvark.com/ for an example. It also happens when rotating orientation on the iPhone and iPad. FYI.

      Reply
    • Devin Walker

      Hi Matthew,  

      This is a known issue and it’s in my list of bug fixes. ¬†I’ll keep you posted on a fix, it should be relatively painless, most likely just get my updated script. ¬†I’ve been really busy lately so finding time could be tough but I ensure you that this is known and will ¬†eventually ¬†be resolved.

      Reply
      • Matthew

        Thanks Devin really appreciate a fix when you get time know the feeling in development lol  

        Reply
  11. 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. This happens on your site too. Press back forward multiple times. Seems to occasionally loose position by itself and go blank also

    Reply
    • etipaced

      I can confirm this is happening for me too. See http://www.integratedbyaardvark.com/ for an example. It also happens when rotating orientation on the iPhone and iPad. FYI.

      Reply
    • Devin Walker

      Hi Matthew,  

      This is a known issue and it’s in my list of bug fixes. ¬†I’ll keep you posted on a fix, it should be relatively painless, most likely just get my updated script. ¬†I’ve been really busy lately so finding time could be tough but I ensure you that this is known and will¬†eventually¬†be resolved.

      Reply
      • Matthew

        Thanks Devin really appreciate a fix when you get time know the feeling in development lol 

        Reply
  12. John

    has there been a fix to the duration with ‘flow’? ¬† didn’t want to be pushy, just wanted to make sure i hadn’t missed it.

    also, in rewind, it rewinds to a blank slide after reaching the last slide.  any solution for that?

    Reply
    • Devin Walker

      I believe that’s related to the slides skipping when rapidly pressing the scroll buttons. ¬†I think it has to do with the lack of the .stop method, although I haven’t had a chance yet to get in a investigate. ¬†

      Reply
  13. John

    has there been a fix to the duration with ‘flow’?¬† didn’t want to be pushy, just wanted to make sure i hadn’t missed it.

    also, in rewind, it rewinds to a blank slide after reaching the last slide.  any solution for that?

    Reply
    • Devin Walker

      I believe that’s related to the slides skipping when rapidly pressing the scroll buttons. ¬†I think it has to do with the lack of the .stop method, although I haven’t had a chance yet to get in a investigate. ¬†

      Reply
  14. Adam

    Great work on this plugin but I’m having some issues implementing it. Could you look at my code and see if there is anything conflicting? Not sure why but its not activating the javascript. Pulling my hair out on this one. A test is up here ¬†http://www.adamdipper.net/abntest/

    Reply
  15. Adam

    Great work on this plugin but I’m having some issues implementing it. Could you look at my code and see if there is anything conflicting? Not sure why but its not activating the javascript. Pulling my hair out on this one. A test is up here¬†http://www.adamdipper.net/abntest/

    Reply
  16. Esg_test

    Hello, This is an amazing slider…. ¬†thank you. ¬†Question for you. ¬†I am seeing both the bullets and slidenumbers in the top right.. how can I just have the dots or remove them all together? ¬†Thanks.

    Reply
  17. Esg_test

    Hello, This is an amazing slider…. ¬†thank you. ¬†Question for you. ¬†I am seeing both the bullets and slidenumbers in the top right.. how can I just have the dots or remove them all together? ¬†Thanks.

    Reply
  18. Exosimon

    How do you remove the arrows?

    Reply
  19. Exosimon

    How do you remove the arrows?

    Reply
  20. Steve

    This slider is great thank you. ¬†I am using it on my site http://www.rockandbluescruise.com. ¬†I can’t get the shaded bottom border to frame the text. ¬†Any idea on what is wrong? ¬†Thanks.

    Reply
  21. Steve

    This slider is great thank you. ¬†I am using it on my site http://www.rockandbluescruise.com. ¬†I can’t get the shaded bottom border to frame the text. ¬†Any idea on what is wrong? ¬†Thanks.

    Reply
  22. zilog

    Thanks for jFlow it works great!

    I have  

    Reply
  23. zilog

    Thanks for jFlow it works great!

    I have 

    Reply
  24. zilog

    Thanks for jFlow! It works great. Is there a way to embed youtube/vimeo videos in a slide? I have tried successfully but it only works with the old embed code that these streaming sites provide (the flash player) but not with the new embed code (iframe based). Because most oEmbed enabled sites now return an iframe I would like to know how to add support for this in jFlow. I’d like to have a gallery in which I can display static photographs as well as streaming videos.

    Reply
    • Devin Walker

      Good point Zilog.  I think this is an important feature to include in the next update.  I will put this on the task list for the next release.

      Reply
  25. zilog

    Thanks for jFlow! It works great. Is there a way to embed youtube/vimeo videos in a slide? I have tried successfully but it only works with the old embed code that these streaming sites provide (the flash player) but not with the new embed code (iframe based). Because most oEmbed enabled sites now return an iframe I would like to know how to add support for this in jFlow. I’d like to have a gallery in which I can display static photographs as well as streaming videos.

    Reply
    • Devin Walker

      Good point Zilog.  I think this is an important feature to include in the next update.  I will put this on the task list for the next release.

      Reply
  26. fit2page

    Hi,

    When applying your script on a page with multiple javascript controls such as menu I encounter a problem. The moment a slide is triggered the openend menu item is closed. it seems that your script resets all other jQuery scripts on the page.

    Thanks for your help.
    Marc

    Reply
  27. fit2page

    Hi,

    When applying your script on a page with multiple javascript controls such as menu I encounter a problem. The moment a slide is triggered the openend menu item is closed. it seems that your script resets all other jQuery scripts on the page.

    Thanks for your help.
    Marc

    Reply
  28. Ecaz

    Hi! I have this installed on my demo site but the problem is when I reach the end of the slider and I either let the pause time run out or click next it goes back to slide 1 but instead of showing the image it’s just a blank/white screen. But if I click the little bullet navigation the image comes back.

    Any solution?

    Reply
  29. Ecaz

    Hi! I have this installed on my demo site but the problem is when I reach the end of the slider and I either let the pause time run out or click next it goes back to slide 1 but instead of showing the image it’s just a blank/white screen. But if I click the little bullet navigation the image comes back.

    Any solution?

    Reply
  30. Barna Szalai

    Hi, nice library. Anyway I have problem with accented, non english characters like é á .. page renders questionmarks. charset is utf-8 thats okay, maybe the javascript do something?
    thanks

    Reply
    • Barna Szalai

       Ahh forget it i was using a simple text editor, with IDE saving file with spec chars all okay. sorry

      Reply
  31. Barna Szalai

    Hi, nice library. Anyway I have problem with accented, non english characters like é á .. page renders questionmarks. charset is utf-8 thats okay, maybe the javascript do something?
    thanks

    Reply
    • Barna Szalai

       Ahh forget it i was using a simple text editor, with IDE saving file with spec chars all okay. sorry

      Reply
  32. Braziltraveller

    Hi, great stuff! I’m trying to get the sliding images to work with a different set of images and size…no luck so far. I know your set works in my project but as soon as I convert it to 800*600 it starts running out of sync. The prev/next buttons…I can’t pull them back. Is this somehow set which I have overlooked??

    Reply
  33. Braziltraveller

    Hi, great stuff! I’m trying to get the sliding images to work with a different set of images and size…no luck so far. I know your set works in my project but as soon as I convert it to 800*600 it starts running out of sync. The prev/next buttons…I can’t pull them back. Is this somehow set which I have overlooked??

    Reply
  34. Julien

    Hello Devin,

    Thanks for all the improvements, and especially for the “pause” option as this is what I was looking for : the possibility to have short transitions, but time enough to read the slides.

    There are some problems with the “Options” tab on jFlow Plus v2 Demo page, probably due to some markup typo. This results in a offset between the parameters and their descriptions.

    For instance :
    prev       number       Time in miliseconds to pause between slide transitions

    Of course, this is the description for the “pause” parameter and not the “prev” one.

    Also, I found quite difficult to access the demo page of the v2.
    If I didn’t had the idea to click the picture, I would not have found it.

    Lastly, the only download link I could find were for the v1.2.
    For the v2, I had to display the source code of your page.

    Cheers.

    Reply
    • Devin Walker

      Hi Julie,  

      Thanks for the comment. ¬†Thanks for pointing out the issue with the options on the demo page. ¬†Also I will try to make it more obvious where the download is. ¬†I’m planning on moving the project over to GitHub where hopefully it will get more community development. ¬†I’m going to a JavaScript hack night this Thursday and improving the slider will be my main focus. ¬† ¬†

      Reply
  35. Julien

    Hello Devin,

    Thanks for all the improvements, and especially for the “pause” option as this is what I was looking for : the possibility to have short transitions, but time enough to read the slides.

    There are some problems with the “Options” tab on jFlow Plus v2 Demo page, probably due to some markup typo. This results in a offset between the parameters and their descriptions.

    For instance :
    prev     number     Time in miliseconds to pause between slide transitions

    Of course, this is the description for the “pause” parameter and not the “prev” one.

    Also, I found quite difficult to access the demo page of the v2.
    If I didn’t had the idea to click the picture, I would not have found it.

    Lastly, the only download link I could find were for the v1.2.
    For the v2, I had to display the source code of your page.

    Cheers.

    Reply
    • Devin Walker

      Hi Julie,  

      Thanks for the comment. ¬†Thanks for pointing out the issue with the options on the demo page. ¬†Also I will try to make it more obvious where the download is. ¬†I’m planning on moving the project over to GitHub where hopefully it will get more community development. ¬†I’m going to a JavaScript hack night this Thursday and improving the slider will be my main focus. ¬†¬†

      Reply
  36. Julien

    Hello (again),

    I tried replacing jquery.flow.1.0.js with jflow.plus.js, as well as jflow.plus.v2.js, but whilst the original jflow plugin is working perfectly with my basic configuration, your versions did not.
    Maybe I missed something.

    jQuery(document).ready(function(){

    ¬† ¬† ¬† jQuery(“#myController”).jFlow({
    ¬† ¬† ¬† ¬† ¬† ¬† slides: “#mySlides”,
    ¬† ¬† ¬† ¬† ¬† ¬† width: “500px”,
    ¬† ¬† ¬† ¬† ¬† ¬† height: “300px”,
                duration: 400
          });
         
    });

    I could find the way to increase the “pause” time during which a slide displays, by just editing the time interval on line 118 of the original jquery.flow.1.0.js plugin.

    But I realize that I need to let more time on some slides, because there’s more text to read on them.

    My first idea was a dirty implementation, by simply inserting twice the slides that need more time. But because of the flowing effect, this is not appropriate.

    For this reason, I think it would be useful adding some “effect: none” or equivalent, allowing to replace slides without the flowing effect.

    Also, allowing some “repeat-N-times” parameter in the list of slides would be much useful.
    Is there already something for this ?

    Thanks.

    Reply
  37. Julien

    Hello (again),

    I tried replacing jquery.flow.1.0.js with jflow.plus.js, as well as jflow.plus.v2.js, but whilst the original jflow plugin is working perfectly with my basic configuration, your versions did not.
    Maybe I missed something.

    jQuery(document).ready(function(){

    ¬†¬†¬† jQuery(“#myController”).jFlow({
    ¬†¬†¬† ¬†¬†¬† slides: “#mySlides”,
    ¬†¬†¬† ¬†¬†¬† width: “500px”,
    ¬†¬†¬† ¬†¬†¬† height: “300px”,
            duration: 400
        });
       
    });

    I could find the way to increase the “pause” time during which a slide displays, by just editing the time interval on line 118 of the original jquery.flow.1.0.js plugin.

    But I realize that I need to let more time on some slides, because there’s more text to read on them.

    My first idea was a dirty implementation, by simply inserting twice the slides that need more time. But because of the flowing effect, this is not appropriate.

    For this reason, I think it would be useful adding some “effect: none” or equivalent, allowing to replace slides without the flowing effect.

    Also, allowing some “repeat-N-times” parameter in the list of slides would be much useful.
    Is there already something for this ?

    Thanks.

    Reply
  38. francois

    Hello,
    I experience problems with Jquery 1.7XX, after a browser tab change and return few mn after on the slide, it stop working, even manually next and prev action show the same slide.
    It work well with 1.4xx Jquery

    best regards
    Francois

    Reply
  39. francois

    Hello,
    I experience problems with Jquery 1.7XX, after a browser tab change and return few mn after on the slide, it stop working, even manually next and prev action show the same slide.
    It work well with 1.4xx Jquery

    best regards
    Francois

    Reply
  40. fafa

    ici tu vas trouver des scripts gratuit avec demo
    http://55points.blogspot.com/

    Reply
  41. fafa

    ici tu vas trouver des scripts gratuit avec demo
    http://55points.blogspot.com/

    Reply
  42. Mike

    Hello,
    jFlow works great on my site until I add a sixth slide. Then every slide after the fifth one is garbled (superimposed on another or even blank). Is there a maximum number of slides (5)? If not, any ideas?
    Thanks

    Reply
    • Grayson Null

      I was having the same issue but I just figured it out. All that is required is making sure that the number of slides you have matches the number of

      tags you have under

      i.e if you have 8 slides you need 8 tags. hopes this solves your problem.

      Reply
  43. Mike

    Hello,
    jFlow works great on my site until I add a sixth slide. Then every slide after the fifth one is garbled (superimposed on another or even blank). Is there a maximum number of slides (5)? If not, any ideas?
    Thanks

    Reply
    • Grayson Null

      I was having the same issue but I just figured it out. All that is required is making sure that the number of slides you have matches the number of

      tags you have under

      i.e if you have 8 slides you need 8 tags. hopes this solves your problem.

      Reply
  44. Aviram

    So, I was trying to use jFlow in a page where the ‘direction’ attribute was set to ‘rtl’.

    There was a 50-50 chance that things will work properly (after using several jQuery plugins, that’s the stats), well, it didn’t…

    My days of debugging UI components are over, but since it’s an elegant slider I decided to take a chance and search/replace all ‘left’ occurrences with ‘right’ in the js file. Took a minute but not surprisingly, it worked.

    Hope it’ll be supported in some future version…

    Reply
  45. Aviram

    So, I was trying to use jFlow in a page where the ‘direction’ attribute was set to ‘rtl’.

    There was a 50-50 chance that things will work properly (after using several jQuery plugins, that’s the stats), well, it didn’t…

    My days of debugging UI components are over, but since it’s an elegant slider I decided to take a chance and search/replace all ‘left’ occurrences with ‘right’ in the js file. Took a minute but not surprisingly, it worked.

    Hope it’ll be supported in some future version…

    Reply
  46. Social Blogsite

    In “Flow” mode, while you are seeing the last slide (the longer chance for you to re-click it), the whole rewind-able slider trick is not ready yet, so clicking in the FIRST slide takes you to correctly to the first slide, but the “cur” variable is not updated, so the NEXT slide the auto-slider takes you to is the OTHER first slide (the dummy one at the end), instead of the 2nd slide,

    so you just see …

    #1 – FUUUZZZYYY – #1(again)

    add cur=0; in line 155 so it should read

    //animate the slide container into position
    $('#mySlides').animate({
    left: '0px'
    });

    cur = 0;//add this to fix double 1st slide!

    //move the selected pagination class to the first item
    $(jFC).removeClass(jSel);
    $(this).addClass(jSel);

    In other words, the current/next should be updated before they currently are in the script, but only this one shows the issue because it’s manually changed.

    Reply
  47. Social Blogsite

    In “Flow” mode, while you are seeing the last slide (the longer chance for you to re-click it), the whole rewind-able slider trick is not ready yet, so clicking in the FIRST slide takes you to correctly to the first slide, but the “cur” variable is not updated, so the NEXT slide the auto-slider takes you to is the OTHER first slide (the dummy one at the end), instead of the 2nd slide,

    so you just see …

    #1 – FUUUZZZYYY – #1(again)

    add cur=0; in line 155 so it should read

    //animate the slide container into position
    $('#mySlides').animate({
    left: '0px'
    });

    cur = 0;//add this to fix double 1st slide!

    //move the selected pagination class to the first item
    $(jFC).removeClass(jSel);
    $(this).addClass(jSel);

    In other words, the current/next should be updated before they currently are in the script, but only this one shows the issue because it’s manually changed.

    Reply
  48. Social Blogsite

    Around line 314, you are changing the left property to EVERY first child inside the slides!
    It was breaking my design, and every other that has elements not necessarily left-aligned.

    It should read: (add the greater than sign before the : )


    if($(opts.slides).find(">:first-child").css({ left: totalWidth })) {
    $(opts.slides).find(">:first-child").css('left','0px');

    Reply
  49. Social Blogsite

    Around line 314, you are changing the left property to EVERY first child inside the slides!
    It was breaking my design, and every other that has elements not necessarily left-aligned.

    It should read: (add the greater than sign before the : )


    if($(opts.slides).find(">:first-child").css({ left: totalWidth })) {
    $(opts.slides).find(">:first-child").css('left','0px');

    Reply
  50. aaronkof

    hello, i’m find a bug.
    The slides will disappear when the browser is resized.
    https://wordimpress.com/demos/jflowplus-v2/ demo has this bug.

    Reply
    • vipas

      I found the same problem, so I tried to fix it by commenting out the line 231. Fortunately, it works for me. Hope this might help

      Tested with Google Chrome

      Reply
  51. aaronkof

    hello, i’m find a bug.
    The slides will disappear when the browser is resized.
    http://www.wordimpressed.com/demos/jflowplus-v2/ demo has this bug.

    Reply
    • vipas

      I found the same problem, so I tried to fix it by commenting out the line 231. Fortunately, it works for me. Hope this might help

      Tested with Google Chrome

      Reply
    • Social Blogsite

      The resize function is adjusting the marginLeft property, instead of the left property.
      Just replace
      marginLeft: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")
      by
      left: "-" + (cur * $(opts.slides).find(":eq(0)").width() + "px")

      Reply
  52. ayordy67

    I must be blind, where is the documentation located?

    Reply
  53. ayordy67

    I must be blind, where is the documentation located?

    Reply
  54. Adam

    Download link doesnt work.

    Reply
  55. shyamjptpm

    i cant download the jflow

    Reply
  56. Mysticman

    Looks nice but it has got many many bugs and css issues. I hope somebody develop it. But give 5 star for it ūüôā I can offer my jQuery and CSS knowlegde for this if you put it on github,

    Reply
    • Devin Walker

      Hi Mysticman, thanks for the comment. I agree, it’s been too long since I’ve had time to update it and jFlow is dying to be on GitHub. I’d love the help if you have the time! I’m going to post it up on Github soon and will let you know when it’s up there. I’m hoping this will happen in the next day or two.

      Reply
    • Devin Walker

      Hi Mysticman – I’ve put jFlow on GitHub: https://github.com/DevinWalker/jflow/

      It would be great to have you as a contributor!

      Reply
  57. Coyboy

    My Photography site I just revised uses jflow plus. http://www.coyboyphotography.com Everything looks great on my macbook but my ipad doesn’t fit the slider properly. Should I resize the slider frame or am I missing something that scales it down to Ipad.

    Reply
  58. i hate social sites

    fuck you with the lock thing…

    Reply
  59. socialblogsite

    Where did the documentation go?
    I’m trying to find the callback for each slide to animate objects inside each slide‚Ķ but I noticed you are using layer slider for your own website so‚Ķ is there any callback I can use to trigger animations? (or at least adding a class to the whole slider that would trigger css animations) I started doubting it‚Ķ or you’d have used it for your own website o_O

    Reply
  60. MilkyTech

    I have an old jFlow slider (I think its 1.1) which only has controls for prev and next. I want to also have a control to pause the slider indefinitely. Can this be done? In looking at the code for this jFlow Plus V.2, I still only see prev and next.

    Reply

Leave a Reply