jQuery Liquid Carousel plugin

Posted on 07/22/10 50 Comments

jQuery Liquid Carousel preview

New version of the plugin is in the works: https://github.com/jnik/Liquid-Carousel

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.

50 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

  10. Sprink says:
    Thursday, November 24, 2011 at 6:17am

    I was wondering if there was any way to put more than one of these on a single webpage?

    Thank you in advance for your help!

  11. Marcelo says:
    Thursday, March 1, 2012 at 6:56pm

    How can change onclick event to onmouseover

  12. Phil Martin says:
    Wednesday, March 7, 2012 at 2:45pm

    This is a great carousel. Have you had a chance to do a vertical version? That would make it perfect!

    Thanks.

    Phil

  13. ahmad says:
    Friday, March 9, 2012 at 3:31pm

    Hi

    How can I make the the carousel items to auto slide? Does it supports that ?

  14. JNik says:
    Friday, March 9, 2012 at 4:00pm

    @Marcelo
    You would have to edit the plugin’s code to do the animation onhover instead of on click.

    @Phil Martin
    I haven’t had the chance to do the changes I want since I released the plugin. I have plans to completely redo the plugin and add more animations and options but that will probably not be anytime soon.

    @ahmad
    There is no auto slide functionality built in the plugin. You could set a timer to call $(‘#liquid1 .next’).click(); when the mouse pointer is not over the carousel, but that’s definitely not an elegant solution.

  15. ahmad says:
    Sunday, March 11, 2012 at 10:52am

    Thanks for reply. Well you can keep that option on notes when you redo the plugin in future.Meanwhile i’ll try your fix.

    ahmad

  16. Tata says:
    Friday, April 13, 2012 at 1:44am

    Hi, it’s nice script !
    But,i tested with IE8 on windows 7 ,the first picture will disappear ?
    I click right arrow and then click left, the first picture not appear immediately,unless I move the mouse. Why?

  17. Nik says:
    Friday, April 27, 2012 at 9:56am

    hi JNik thanks for great plugin
    but can you halp me…
    is there any way to slide images by “1″ clicking on next/prev button

  18. Marie-Elena says:
    Monday, May 21, 2012 at 8:36pm

    Hello,

    I’m trying to use something similar on my site but the CSS and Jquery does not work for me. Instead I get a vertical line. What am I doing wrong?

    Thank you.

  19. H says:
    Thursday, July 19, 2012 at 1:37am

    Great plugin!

    Is there any way to disable/hide the arrows when you have reached the end of the list?

  20. Sergey says:
    Friday, August 17, 2012 at 4:39pm

    I found your project and it is great! Just one thing. Is it possible to hide the left arrow on the first screen and the right arrow on the right screen. Or may be it’s easier to use different CSS for inactive arrows.

    Thank’s
    Sergey

  21. Joerg says:
    Wednesday, September 5, 2012 at 10:45pm

    Hi there

    Very nice Carousel variant…

    As your contact form is not working:

    Is it possible to use more than 1 Liquid Caroussels on the same page?
    If i try to use another one after the first one, the style gets corrupt…

    Greetz
    Joerg

  22. JNik says:
    Tuesday, September 25, 2012 at 6:31pm

    Thank you for trying liquid carousel.

    I don’t really provide support for this version of the plugin anymore.

    I have started working on a newer version. You can see the progress here: http://jnik.github.com/Liquid-Carousel/index.html

    Please don’t use in a production site since I’m still experimenting with the code.

  23. Francesco says:
    Saturday, November 24, 2012 at 8:07pm

    Hello,

    Is it possible to define the current position of after click.

    Thank’s
    F

  24. Michael says:
    Friday, February 22, 2013 at 6:05pm

    Hi,

    Nice plugin, congratulations. Is it possible to install this plugin on Magento store? Thanks.

  25. JNik says:
    Saturday, February 23, 2013 at 11:16am

    @Michael I don’t see why you wouldn’t be able to.

  26. Michael says:
    Saturday, February 23, 2013 at 12:37pm

    cause i’m a beginner :b … Actually i’m trying to install your plugin in my magento store and i don’t know where i put this code, for example:

    $(document).ready(function() {
    $(‘#liquid’).liquidcarousel({height:160});
    });

    Thanks for your attention.

    Regards,

    Michael

  27. Abid Shahzad says:
    Sunday, February 24, 2013 at 7:24am

    Thanks for nice plugin.

    I’m trying to implement this in one of my site. Plugin is working great in FF, IE, Opera but not working in Chrome and Safari. The reason is that not all of images are of same size i.e. different widths. How can I over come this problem.

    thanks

  28. JNik says:
    Monday, February 25, 2013 at 8:12pm

    @Abid You can probably try the newer version of the plugin I’m working on: https://github.com/jnik/Liquid-Carousel, but you must make sure that your design will not allow the carousel to be smaller than your larger image + the arrows (that’s a bug I won’t fix till I implement responsiveness).

    I haven’t tested it much, but so far it looks good and it also has touch support.

  29. Abid Shahzad says:
    Thursday, February 28, 2013 at 6:48pm

    JNik Thanks for the response. I will try it.

  30. Andy says:
    Thursday, March 14, 2013 at 7:06pm

    Is it possible to get this working with vBulletin? I tried to get it working however for whatever reason it does not call the js files, it does show up the images section of the code however not the right and left click section or the actual background of the carousel.

  31. ddiinnxx says:
    Monday, March 18, 2013 at 7:47pm

    Hi,

    Thanks of sharing the code. Anyway we can control the number of rows? Can we have two rows? If you can point how to do it, I will try to do it myself!

    Regards!

  32. bala says:
    Saturday, March 23, 2013 at 12:26pm

    i am trying to get multiple liquid carousel to run. but its not. :( any pointers?

  33. JNik says:
    Sunday, March 24, 2013 at 9:33pm

    @ddiinnxx a hack would be to add two images in every LI (one bellow the other) with some margin.

  34. JNik says:
    Sunday, March 24, 2013 at 10:21pm

    @bala check http://www.nikolakis.net/liquidcarousel/multiple.html

  35. Luciana Ramos says:
    Monday, April 1, 2013 at 7:20pm

    Hi John
    Nice meeting you! And thanks in advance for giving me attention!
    I´m trying to use your jQuery Liquid Carousel plugin at my Magento app
    but I couldn´t do it… do u know if it´s possible? I´m trying to use it in a Static block, but I couldn´t do it.

  36. LAC says:
    Saturday, May 4, 2013 at 5:57am

    Hello,

    Thanks for the code… I would like to ask: “Is it support caption?”

  37. JNik says:
    Sunday, May 5, 2013 at 12:12pm

    @LAC you can put whatever you want inside each list item :)

  38. Meredith says:
    Monday, May 13, 2013 at 6:33pm

    Love this carousel. The liquid design is perfect for my site. Just one thing more that I would really like – infinite cycling. Hoping that will be part of the next version.

  39. Veer says:
    Wednesday, May 22, 2013 at 9:14am

    Hello JNik,
    I am facing a problem in this carousel. I am having small variable width and constant height tables in the list.
    Its showing fine. After clicking the next, the next page comes but some part of next page goes with the first page scroll.
    How to overcome this problem.
    Thanks,
    Veer

  40. JNik says:
    Tuesday, May 28, 2013 at 7:09pm

    @Veer, can you provide a link to a page or fiddle that demonstrates your problem?

  41. Davy says:
    Friday, June 28, 2013 at 12:36am

    Hi, I’m trying to add your carousel to my homepage but I can’t get the navigation buttons to appear. I’m not sure where I’m supposed to put them in in this section of the code (from my page directing to the correct slide images):

    Then you need to add the items list and the navigation buttons in the body of your document:

    	<a href="tickets.html" rel="nofollow"></a>
    	<a href="news.html" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    	<a href="#" rel="nofollow"></a>
    

  42. JNik says:
    Friday, July 5, 2013 at 11:32am

    @Davy

    <div class="liquid">
      <span class="previous"></span>
      <div class="wrapper">
        <ul>		
          <li><a href="tickets.html" rel="nofollow"></a></li>
          <li><a href="news.html" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
          <li><a href="#" rel="nofollow"></a></li>
        </ul>
      </div>
      <span class="next"></span>
    </div>
    

  43. JL says:
    Wednesday, July 24, 2013 at 7:53pm

    Thanks for posting this super great plugin.
    This is so perfect for my site and everything is good to go except for the infinite loop.
    Are you planning to develop it any time soon?

  44. Marcelo says:
    Wednesday, August 7, 2013 at 8:23pm

    I added into head:

    i just copy and paste the same code:
    http://www.nikolakis.net/liquidcarousel/

    I am getting this error:

    Erro: $(“#liquid1″).liquidcarousel is not a function

  45. JNik says:
    Friday, August 9, 2013 at 8:25pm

    @JL Thank you :) About the infinite loop… I wouldn’t hold my breath if I were you. I don’t work on the plugin very often :/

    @Marcelo I guess the HTML didn’t come through. The error you mention means that liquid carousel is not loaded (the moment you try to initialize it).

  46. Shabbir Lakdawala says:
    Monday, August 12, 2013 at 3:33pm

    I have add a disabled class to arrows when once the carousel as no next or previous, i tried lots of stuff but its not working.

  47. Max says:
    Thursday, August 22, 2013 at 11:22am

    Hi! Your carousel is wonderful. If you don’t mind could I give you a piece of advice to add a bit of js to buttons for preventing double-clicking defect. Example:


    Thx

  48. Uday Kari says:
    Monday, September 16, 2013 at 11:35am

    After reviewing dozens of products – Liquid is by far the leanest, no fuss, working, quality code. Big Thanks!

  49. Brion Mallon says:
    Friday, September 27, 2013 at 4:15pm

    Hi Lio,

    Firstly, you have a great plug-in. Question I have is regarding how the wrapper div width size is calculated.

    We have a website that responds to resizing. A media query is used to change CSS width rules for the images contained within the Carousel. The carousel wrapper div width also appears to change.
    When the Wrapper div resizes, it appears to get stuck with the new calculated size even when CSS image width changes again.
    I am not sure what effects the wrapper width calculation as it is difficult to test the resizing code.
    Any help would be appreciated, thanks.

  50. JNik says:
    Monday, September 30, 2013 at 7:18pm

    Hello Brion,

    The plugin is quite old and doesn’t deal with responsiveness. That’s in my plans for the next version (which is still under development).

Post a Comment

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