NotOneBit Blog

Get started today on your next web project with NotOneBit
We've been doing web development before you were born *

64 thoughts on “jQuery Infinite Carousel Plugin

  1. Hello, I’m trying to use this plugin with facebox. If an image is clicked a facebox popup is shown with the image in it. Everything works fine for the first several images, after what facebox doesn’t work any more. Please help!

    Thanks!

  2. Hello! I like your plugin.
    How can I get get smooth animation effect (i.e. image scrolling without delay) ?
    Thanks!

  3. Prev/Next buttons not working in Firefox but do work in IE. Any suggestions?

    Very nice plugin – thanks!

    rcd

  4. This plugin is awesome and is exactly what i’ve been looking for.
    Couple of issues I can’t seem to figure out:
    1. each li/image/slide isn’t wiping like the demo and isn’t doing any transition at all (but the icons transitions ARE working).
    2. the images won’t update – the text does seem to update though

    Let me know if you need a link to the site, right now it’s hidden on a stage environment

    Thanks so much!!

  5. Nice plugin, but Im having problem when the direction of the page is set to RTL, the images are not showing, can you please advice me regarding this matter.

    Thank you once again for this wonderful plugin!

  6. This plugin is awesome and thank you!!!

    how do I make caption text appear in front of textholder?
    I would like to have font appear with 100% opacity and not underneath the textholder and yet I would like to have textholder overlay as 6 % opacity.

    many thanks
    reverse

  7. Hi there,
    I am trying to stlye a text inside caption with different font sizes, color and multiple lines….I tried different methods but none worked….any tips?

    what am I tring to make…simialr to example below?
    example:
    ———————————————————————————————————-
    ARTISTNAME A SMALL ICON PLACEMENT WITH LINK TO EXTERN
    EVENTLOCATION A DATE
    ———————————————————————————————————-

    here methods:
    method1: (it support span class but with font size and color but not position)
    artistnameLondon, Volkshaus 03.12.2009

    method2: (idosent support at all)
    here is some

    and here is my css file:
    #carousel {
    margin:0 auto;
    width:470px;
    height:200px;
    padding:0;
    overflow:scroll;
    border:0px solid #000000;
    background: #ff6600;
    }
    #carousel ul {
    list-style: none;
    width:940px;
    margin: 0;
    padding: 0;
    position:relative;
    }
    #carousel li {
    margin: 0;
    padding: 0;
    display:inline;
    float:left;
    color: #ff6600;
    }

    .textholder {
    font-family: Helvetica, Arial, sans-serif;
    padding:4px;
    background: #000000
    }

    .artist {
    margin:9px;
    color:#FF6600;
    font-size: 25px;
    font-weight:bold;

    }
    .eventlocation {
    margin:90px;
    color:#b8dfff;
    font-size: 12px;
    font-weight:bold;
    }
    .eventdate {
    margin:10px;
    color:#FFFFFF;
    font-size: 12px;
    font-weight:normal;
    }
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    }

    MANY THANKS
    anyone able to do it?

  8. This is a fantastic tutorial, and I have shown my client several trial variations that have worked well.
    I was wondering if you are able to point me in the right direction – I have been asked if it is possible to have this running as the banner image on a Squarespace site.
    Would this be possible?

    Many thanks :)

  9. Great post! I’ve tried implementing this using the instructions for Squarespace at http://developers.squarespace.com/design-coding/post/962581?lastPage=true but the result is just a frame with the 3 images I’ve added that can be manually slid with a scroll bar at the bottom – no animation working at all :/ Any ideas on where I’ve gone wonky on this, please? I only found one instance of code that needed changing (as per instructions) in the .js file rather than the half dozen or so suggested…. have I missed a trick?

    Thank you :)

    1. @McQ
      A link to your page would be helpful. I see you also posted on squarespcae’s forum so maybe someone there has your answer.

  10. Hello,

    Yes, trying to get help from everywhere at the moment! The page is currently disabled to public viewing, so I hope the code I’ve used may give up some clues.

    Files located within Storage as a folder called jquery.infinitecarousel2. Sub folders are as per downloaded folder structure eg >js>infinitecarousel>…etc.

    This is what’s been imput as HTML in the page:

    $(function(){
    $(‘#carousel’).infiniteCarousel();
    });

    #carousel {
    margin:0 auto;
    padding-right: 0px; /*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    padding-left: 0px;/*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    width:500px;
    height:320px;
    overflow:scroll;
    border:2px solid #fff;
    }
    #carousel + div {
    margin:0 auto;
    }
    .textholder {
    text-align:left;
    font-size:small;
    padding:6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    }

    Location and Resorts
    Things to see and do in Larnaca
    Latest offers on apartment bookings

    This is the CSS that’s been added to the Custom CSS area:

    #carousel ul {
    list-style: none;
    width:1500px; /*change to the total width of ALL images combined!*/
    margin: 0;
    padding: 0;
    position:relative;
    }
    #carousel li {
    display:inline;
    float:left;
    }

    Thanks for helping!

  11. Sorry, the beginning of the HTML section has the obligatory:

    [script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script]
    [script type="text/javascript"]

    (With where { or } are shown here)

  12. Third time lucky with getting the all of the code used the HTMl section in here (apologies):

    [script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”>
    #carousel {
    margin:0 auto;
    padding-right: 0px; /*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    padding-left: 0px;/*ADD PIXELS HERE IF YOU WANT PADDING ON EITHER SIDE TO HINT AT NEXT IMAGE*/
    width:500px;
    height:300px;
    overflow:scroll;
    border:2px solid #fff;
    }
    #carousel + div {
    margin:0 auto;
    }
    .textholder {
    text-align:left;
    font-size:small;
    padding:6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    }

    [ul>
    [img alt=”” src=”p1.jpg” width=”500″ height=”300″ /]Your caption text goes here
    [img alt=”” src=”p2.jpg” width=”500″ height=”300″ /]Your caption text goes here
    [img alt=”” src=”p4.jpg” width=”500″ height=”300″ /]Your caption text goes here
    </ul]
    </div]

  13. I looked at a lot of sliders on the web. This one is by far the simplest and cleanest. Thank You!

    One question….. Sometimes when the page loads there is a split second where you can see the images in the bulleted list. Is there a way to prevent this from happening. It is very distracting to the eye.

    The slide has been implemented onto our beta site http://2010beta.gpnworld.com/index2.asp

    Thank You!
    Amy

    1. @Amy
      Try placing all the JavaScript code at the bottom of your page and then instead of using
      $(document).ready(function(){
      // Your code here
      });

      or

      $(function(){
      // Your code here
      });

      use

      $(window).load(
      // Your code here
      );

      Note that I haven’t tested this yet, but it may work.

  14. This is a great plug in!

    I do have one question though. I am not a designer/programmer, although I managed to get the carousel up and running ok. Is it possible to remove the navigation element (ie arrows, pause, play etc). I’m sure it must be. It wouldn’t matter if navigation was still possible, it’s just that I don’t want the navigation symbols to overlay my images (ie be visible). I had a play with the script but without success.

    Help would be much appreciated.

  15. This is a great plugin, very nicely built. However, I think having the CSS in with the JS and then having it all render inline styles is pretty messy and a nightmare to skin. I know there are some cases where the CSS has to be dealt with by jQuery but so much of this would be so much easier to deal with, nopt to mention more semantic, if it was in a seperate stylesheet.
    Still, I’m not going to complain too much becuase the work you have put into this plugin definitely pays off in terms of performance.

  16. This is exactly what I’ve been looking for, and it’s fantastic.

    I have a small problem though, my first image only appears at the start of the transition, and not before. I even have a javascript pre-load for it.

    Here’s the link: http://simonwalkerfreelance.squarespace.com

    (only the first image actually exists, the others link to it but they aren’t uploaded yet)

    Cheers for any help you can give

    1. That’s not a carousel. I carousel moves the images. You’re looking for a fader or gallery which is different.

  17. I’m having a bit of trouble with this code. I’ve followed the instructions closely, but it doesn’t seem to be working. The images do not scroll, the first image in the list doesn’t show up at all, and the captions just appear underneath the images instead of overlaying them.

    Can anyone help?

    Carolann
    carolanncan@gmail.com

Comments are closed.

%d bloggers like this: