NotOneBit Blog

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

220 thoughts on “Huge Updates to jQuery Infinite Carousel – Version 2 Released

  1. I am really frustrated and don’t know what I’m doing wrong.

    — I downloaded the zip file, placed the js folder into the main folder on my ftp
    — Added the following to the head of my html page before the body tag:

    $(function(){

    $(‘#carousel’).infiniteCarousel({
    transitionSpeed : 2000,
    displayTime : 10000,
    textholderHeight : .25,
    displayProgressBar : false
    });

    — Created the div in my html page:

    — Created the css:

    #carousel {
    margin: 0 auto;
    width: 716px;
    height: 403px;
    padding: 20;
    overflow: hidden;
    -moz-box-shadow: 0px 0px 10px #333;
    -webkit-box-shadow: 0px 0px 10px #333;
    box-shadow: 0px 0px 10px #333;
    clear:right;
    border: 2px solid #999;
    }
    #carousel ul {
    list-style: none;
    width: 3580px;
    margin: 0;
    padding: 0;
    position: relative;
    }
    #carousel li {
    display: inline;
    float: left;
    }
    .textholder {
    text-align: center;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    }

    — And loaded the page. It looks correct on the web page, but will not scroll or move or anything, it just shows as a static image of the first image.

    What am I doing wrong? Any support would be appreciated.

  2. Sorry, part of this got deleted from my initial post.

    To clarify, I added the whole section above the body tag in the html:

    $(function(){

    $(‘#carousel’).infiniteCarousel({
    transitionSpeed : 2000,
    displayTime : 10000,
    textholderHeight : .25,
    displayProgressBar : false
    });

    1. Just a guess here. Trying adding the code

      $(function(){

      $(‘#carousel’).infiniteCarousel({
      transitionSpeed : 2000,
      displayTime : 1000,
      textholderHeight : .25,
      displayProgressBar : false
      });

      at the bottom of your page just before the tag

      1. Sorry, that should ready “at the bottom of your page just before the </body> tag” or tag

  3. Thanks so much to Jason for helping me figure out the problem. The script is running now, but the controls aren’t showing. I have tried re-downloading the script as someone before had done, no luck, I tried to adjust the setting to show controls : true, also no luck. The buttons are there, because when I roll over them the cursor becomes the hand and I can click on them and they function properly, I just can’t see them. Does anyone have a fix? again, here are my settings in both css and html:

    $(function(){

    $(‘#carousel’).infiniteCarousel({
    transitionSpeed : 2000,
    displayTime : 10000,
    textholderHeight : .25,
    displayProgressBar : true,
    showControls : true
    });

    — Created the css:

    #carousel {
    margin: 0 auto;
    width: 716px;
    height: 403px;
    padding: 20;
    overflow: hidden;
    -moz-box-shadow: 0px 0px 10px #333;
    -webkit-box-shadow: 0px 0px 10px #333;
    box-shadow: 0px 0px 10px #333;
    clear:right;
    border: 2px solid #999;
    }
    #carousel ul {
    list-style: none;
    width: 3580px;
    margin: 0;
    padding: 0;
    position: relative;
    }
    #carousel li {
    display: inline;
    float: left;
    }
    .textholder {
    text-align: center;
    font-size: small;
    padding: 6px;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    }

  4. Thank You! Worked like a charm.

    One last question (Sorry, I’m new at this) Is there any way to change the color of the border around the thumbnails. My client doesn’t like red and wants a light blue.

  5. No Worries, Aater some searching and playing, I figured it out. Can’t thank you enough for you’re help.

  6. Hi, thank you for the plugin, works very well.
    Just wanted to ask if there is a way to change the transition between images? I would like to use a fade in. I’m a php developer and not that good with jquery. I changed some css in your js file but couldn’t find that transition effect.

    1. Hei!
      I need too to change the transition to fade in, and change the thumbnails width and height and make a css file of thmes, is that possible?

      Thanks

  7. Thank you for this carousel. It would be great if, when using both the autoHideCaptions option and the inView option to display more than one image, the caption of only the image you’re mousing over appears, rather than the captions of all the images that are in view appearing at the same time.
    If there happens to be a relatively simple tweak for this, I’d love to know it. Otherwise, a wishlist request.
    Thanks again.

  8. Hi there,
    I just started using JQuery and your infinite carousel is amazing. I am trying to add it to my site; however, I want to pause the carousel on mouse over and start again on mouse move.
    Sorry, I am not that good with javascript. Could you please share the code?

    Thanks
    Kuldeep

  9. Hi,

    Excellent plugin. Well done.

    Is there an option to make the image fade in/out rather than slide in/out.

    Thanks,
    Kieran.

  10. How do I get the carousel to work with custom html text links? I dont know how to remove the thumbs and have my own 4 text links, when clicked control the carousel. Do I have to add an ID in the html a href tag? I know you said it possible in your last post, but I am struggling to figure out how to do that. am I making harder than it really is.?

  11. i am looking for the code to center this. when i work with this item i cant figure out how to relocate it

    thanks

    1. If you mean to center the carouselholder Jeff, you could give this a margin: 0 auto, and its container a text-align: center.

  12. Hello,
    thank you for that very nice Script. It works fine but not in IE9.

    Alwas the IE makes so a lot of problems. :-((
    Do You still have a solution for IE9

    Best Regards
    Sandra

  13. Dear Sir,
    Thank you very much for use of the Carousel script. I need to find a way to programmatically pause the script. Did you expose a method for this? Thanks.

  14. Hi, thank you for this wonderful looking carousel, I saw that theres an option to adjust the thumbnail size but is there a way to squeeze and display the full image in the thumbnails?

  15. I am having issues with the navigation images displaying. The imagePath is the same for the .js files as it is on the HTML file but it won’t pull the images from the folder. It recognizes the images are supposed to be there (e.g. if I hover my mouse over the play/pause or the prev/next my cursor will change and the function works like it is supposed to). I am working in Dreamweaver, could this be an issue of I am simply previewing the file rather than “putting” the file so it is live on a the site? Any help would be appreciated.

  16. great plug. exactly what i needed. i’ve quickly implemented it here with rather crude and brutal adjustments to the code (i’m not very fluent in javascript…), and integrated into a ModX CMS template. But i’m having a big problem cleaning it up for presentation. If you would, please open another tab while this window is open and return to the test site (i’ve only tested Firefox, so please view in FF for similar results). the images seem to pile up and overflow down the page. Any ideas on how to correct this? What could be causing this error? thanks so much.

  17. Is there any way to edit the javascript for the plugin to incorporate dynamically loaded images (i.e. thru a CMS)? the attribute requiring a certain # of visible images for hinting seems to stifle that… Thanks.

  18. switching browser tabs and returning to the one with the carousel will make it go really fast until it catches up. tested in Mac FF and Chrome.

    also, I’d add a class the thumbs wrapper in case people someone wants to style it:

    $(obj).after('');

    same for active state of a thumb to override the red border

    1. Yeah, I want to echo the note about the “speedy carousel”. It seems that in the most current versions of FF and Chrome (at least), there is some issue with how the JS runs in a background tab that causes the carousel to act bizarrely when that tab is selected again.

      First, as Oleg stated, the carousel runs fast and without pausing until it “catches up”. But I also saw that even once it caught up and there was a pause again between images, it’s only showing the last image.

      Any suggestions??

    2. After some digging around and experimentation, it seems as tho this is only an issue with jQ 1.6.2, or some versions thereabouts. This site uses 1.4.2 for the demos, and works fine. I tried 1.4.2 and 1.7.1 (the latest as of this writing) and both seem to resolve the issue.

  19. I implemented the carousel in my website – http://www.yipee.sg.

    It looks very good. However, the only drawback is that it takes a long term to download all the images (40) before the carousel appears.

    Is there a way to load the images “on demand”?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: