jQuery Liquid Carousel plugin

Posted on 07/22/10 9 Comments

jQuery Liquid Carousel preview

Liquid carousel is a jQuery plugin intended for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

You can see how the script works and download it at http://www.nikolakis.net/liquidcarousel/

This script was created in a few hours, on my free time. If you find any bugs or you want to make suggestions, please use the form in the comments section bellow.

ToDo List:

  • infinite cycling
  • Create a vertical version
Liquid carousel is a jQuery plugin intented for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.

9 Comments

  1. lio says:
    Monday, August 2, 2010 at 2:23am

    Nice project, very original, and very ergonomic, is it compatible with all browsers ? (can be nice to see this list onto the product page) ;) because after trying a lot of carousel… it’s not always the case ;)
    So you think it’ll complicated for me to change the css, to show the arrows at the top of the pictures ?(with a transparency effect) (and to show one picture by one picture?)
    thanks!!

  2. JNik says:
    Monday, August 2, 2010 at 8:26pm

    Hello Lio,

    The liquid carousel script works in IE6 – IE8, Firefox, Chrome, Opera and Safari. I think I have tested it in Konqueror and it works fine there too.

    Unfortunately the way the script works now doesn’t allow the arrows to be on top of the picture list. That’s because of the way the available width is calculated (container width – arrow width). It is a nice idea though, and I will try to experiment with it during my vacation time next week.

    I don’t see the point of showing just one picture at the time in it, since the whole point of the script is to expand and show more items if there is room. Still if you want to show a fixed number of pictures, you can put the carousel in a div with a fixed width. I’m sure there are better scripts for that though.

    John

  3. Sibyl Perkins says:
    Tuesday, September 13, 2011 at 4:02am

    The plugin is working great for me except in the new version of Internet Explorer. Along with most other jQuery plugins, it’s not working in IE9. Any idea what’s happening or are we just waiting for a new version of jQuery?

  4. SmileyWar says:
    Wednesday, September 28, 2011 at 10:27am

    I have installed this plugin, but am having problems with some computers where when i scroll the point size in browser ie: ctrl scroll, i have in some occasions the issue of the right hand side image and arrow disappear. Then when i change the point size i can see it. This is on a Vista using both IE and Chrome.

    Any thoughts? Many thanks.

  5. JNik says:
    Wednesday, September 28, 2011 at 8:42pm

    @Sibyl Perkins: Sorry for the late reply. I’ve moved recently and have no internet connection at home.

    @Sibyl Perkins & @SmileyWar: Have you tried using the latest jquery version?

    I will look into both problems asap.

  6. JNik says:
    Thursday, September 29, 2011 at 1:39pm

    @Sibyl Perkins: I just tested the script with IE9 on windows 7 and it works without problems. On what OS and with which version of jQuery you got problems?

  7. SmileyWar says:
    Friday, September 30, 2011 at 9:59am

    Hello Jnik,I have version 1.6.4

    i tested it on several machines and these two combinations are currently creating the issue.
    It`s on Vista using both chrome and IE 8
    And another one is XP using chrome and IE 7

    Here is where i have installed it http://roofracks.co.uk/url/c

    Thanks for your help.

  8. Sibyl Perkins says:
    Sunday, October 23, 2011 at 11:03pm

    Sorry for the delay getting back to you. The problem turned out to be an issue with my installation of IE9. I’ve got it fixed now (no thanks to Microsoft).

    Have you had a chance to do a vertical version? I really do love this plugin…thanks again!

  9. Andrea Bruseghin says:
    Tuesday, October 25, 2011 at 11:43am

    Hello John. Very Very beautiful your carousel. I test the script and it is wonderful. One question .. Is possible to hide or change opacity of image arrow when scroller is at the start and at the end of carousel?
    Thank’s in advantage.
    I Want to use it into:
    http://www.cucinenoventa.com/DEMO/index.php?anteprima=moderne

    A.Bruseghin
    BYTE COMPANY

Post a Comment

Your email is never published or shared. Required fields are marked *