Feed on
Posts
Comments

Update: the latest version of the Infinite Carousel plugin can be found here.

As announced earlier, I’m happy to release version 2 of the jQuery Infinite Carousel plugin. What happened to versions 1.3-1.9 you ask? Well, since I overhauled the old plugin and added so many new features, it just seemed fitting to brand this release with a whole new version number. Heck I could’ve named it version Infinite Carousel, the “Illudium Q-36 Explosive Space Modulator” edition, but it seemed a bit wordy. Anyway, like it matters. All you want is the plugin right?

So What’s New?

Where to begin? Based on feedback from users, I’ve added more options than you can shake a stick at. Go on, get a stick. Shake. Can’t be done. There are so many new features that I was a bit worried that the plugin might suffer from option overload, but in the end I think what remained was not only useful but vital to the plugin.

In addition to the features in the previous version, I’ve added the ability to:

  • add easing as an option with separate left and right easing effects
  • specify the path to the navigation images as an option
  • specify how many images should be viewable at once
  • specify padding around images
  • specify how many images should advance when the user navigates using the previous and next controls as well as when the carousel is running automatically
  • hide navigation controls
  • auto hide navigation controls so that they appear only when the user moves their mouse over the carousel
  • auto hide captions so that they appear only when the user moves their mouse over the carousel
  • prevent the carousel from automatically starting
  • move the previous and next navigation control outside the carousel so that they don’t appear on top of any images
  • use keyboard navigation with the ability to disable it (left and right arrows for previous/next, p for pause, s for start)
  • access callback functions

The Most Basic Example

Download

jQuery.InfiniteCarousel2.zip (contains the uncompressed and minified versions in the same zip file. The uncompressed plugin is about 18k while the minified version is about 9k)

Demos

To show off some of the things version 2 can do, I’ve created several demo pages for easy viewing. Each demo link will open in a new window. View the source code for a demo to see the options that were selected.

  1. A basic example with default settings
  2. Displaying and advancing more than one image at a time
  3. Displaying multiple images while advancing one at a time with easing effects
  4. Navigation outside the carousel with captions automatically hidden
  5. Thumbnails and navigation hidden. Keyboard navigation active
  6. Navigation automatically hidden with keyboard controls disabled. Also shows how to hint at the next and last images using CSS
  7. An example of callback functions
  8. An example of how easy it is to integrate with a lightbox plugin. Easing functions are also being used in this example
  9. An infinitely scrolling slideshow with no controls enabled

How to Use

With the exception of new options, the carousel works in the same way as previous versions. First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a div) which must have an ID.  Note that by using CSS, you can style the container (carousel) div to have left and/or right padding so that you can display a small amount of the previous and/or next images (see demo #6 above). The carousel must be a list where each list item is the image and optionally a paragraph containing the caption. See this example.

<div id="carousel">
<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>
</ul>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. Also, all images should be the same size.  If you want to have a caption with an image, it *MUST* exist in a paragraph after the image.

To use the plugin you’ll need to have a copy of  jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it’s set to a minimum of the combined widths of all your images. For example. #carousel ul {width:3000px}. In version 1.2 of the Infinite Carousel this isn’t necessary, however for anyone with JavaScript disabled, declaring the width in your style sheet can give them a simulated (albeit limited) carousel experience.

Be sure to check out the demos above!

Note that in this new version of the carousel, since the path to the navigation images is an option, you may need to specify the path to your installation if you aren’t using the path of “/js/infinitecarousel/images/” which is the plugin’s default path. More on the options below.

That’s it! You can apply the infinite carousel to any number of elements on a page.

Options

The following options are configurable:

  • transitionSpeed – the time (in milliseconds) it will take to transition between two images (default 800)
  • displayTime – the time (in milliseconds) to display each image (default: 6000)
  • textholderHeight – the height of the caption. This is a fraction of the height of the images. (default: .25)
  • displayProgressBar – Boolean. Whether or not to display the progress bar (default: true)
  • displayThumbnails – Boolean. Whether or not to display the thumbnails for the carousel. (default:  true)
  • displayThumbnailNumbers – Boolean. Whether or not to automatically place numbers in the thumbnail boxes. (default: true)
  • displayThumbnailBackground – Boolean. Whether or not to use the corresponding image as the background for a thumbnail box. (default: true)
  • thumbnailWidth – the width of each thumbnail box. (default: ’20px’)
  • thumbnailHeight – the height of each thumbnail box. (default: ’20px’)\
  • thumbnailFontSize – the font size of the number within the thumbnail box. (default: .7em)
  • easeLeft – The type of easing to use when the carousel moves images to the left. Here you can use the jQuery easing plugin and specify any type of easing, or use jQuery’s built-in defaults of ‘linear’ or ‘swing’. (default:  ‘linear’)
  • easeRight- The type of easing to use when the carousel moves images to the right. Here you can use the jQuery easing plugin and specify any type of easing, or use jQuery’s built-in defaults of ‘linear’ or ‘swing’. (default:  ‘linear’)
  • imagePath – The path to the carousel’s navigation images (now sprites). (default: ‘/js/infinitecarousel/images/’)
  • inView – The number of images to display at once. (default: 1)
  • padding – The amount of padding to be applied around each image. (default:  ’0px’)
  • advance – The number of images to be moved either automatically, or when the user moves images by using the navigation controls. (default: 1)
  • showControls – Boolean. Whether or not to display the navigation buttons for previous, next, play and pause. (default: true)
  • autoHideControls – Boolean. Whether or not to automatically hide the navigation controls. (default: false)
  • autoHideCaptions – Boolean. Whether or not to automatically hide the captions (if any). (default: false)
  • autoStart – Boolean. Whether or not to automatically begin the carousel. (default: true)
  • prevNextInternal – Boolean. Display the navigation on the inside of the carousel. If false, controls will be dispayed outside and next to the carousel. (default: true)
  • enableKeyboardNav – Boolean. Enable keyboard navigation (kind of obvious no?). The left and right arrows are used to move the images, while ‘p’ pauses the show and ‘s’ starts it. (default: true)
  • onSlideStart. A callback function triggered when the images begin to move
  • onSlideEnd. A callback function triggered when the images stop moving. An array of images being displayed is returned
  • onPauseClick. A callback function triggered when the carousel is paused

Options are added when calling the script:

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

Note that the CSS of the thumbnail div created by the plugin can be controlled by using a rule like #carousel + div {your CSS here}. The plus between the carousel id and the div specifically targets the thumbnail container.

Enjoy!

Previous Version

I will continue to make the previous versions of the Infinite Carousel available until there seems to be no demand for them. To download them, click here.

218 Responses to “Huge Updates to jQuery Infinite Carousel – Version 2 Released”

  1. Dan says:

    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.

  2. Walia says:

    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

  3. Kieran says:

    Hi,

    Excellent plugin. Well done.

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

    Thanks,
    Kieran.

  4. katie says:

    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.?

  5. jeff says:

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

    thanks

    • Esther says:

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

  6. Sandra says:

    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

  7. Makure Takahashi says:

    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.

  8. James says:

    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?

  9. Sam says:

    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.

  10. paul says:

    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.

  11. paul says:

    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.

  12. Oleg says:

    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

    • Ambrose Ferber says:

      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??

    • Ambrose Ferber says:

      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.

  13. Peter says:

    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”?

  14. Ambrose Ferber says:

    This is definitely one of the best carousel/sliders out there; generally, I love working with it. I do have one criticism tho: while it’s nice that you don’t have to implement a CSS file to get styling, the fact that all the CSS happens inline and no classes are assigned makes it difficult to do much custom styling for different states. Specifically, I wanted to change the way that the thumbnails looked and behaved, and my only choice (other than editing the plugin itself) was to do some jQ selection on inline CSS attributes to figure out which thumb was active, and inject a CSS class.

    Should you ever code an update to IC2, I would humbly request that you add some conditional action based classes to things for custom styling.

  15. Arthur Alvim says:

    Nice Carousel. My only problem til now is for customizing the thumbnails css.

    When I add the styles below, for instance, it doesn’t change the borders but changes the font weight and the colors of the text+backgrounds normally.

    #carousel + div .thumb {
    background-color: #FFF;
    font-weight:bold;
    color: #000;
    border: 1px solid #000;
    }
    #carousel + div .thumb:hover {
    background-color: #000;
    font-weight:bold;
    color: #FFF;
    border: 1px solid #FFF;
    }

    I didn’t find a rule for the active thumbnail. Could you give us some practical example of how customize it?

    Thanks!

  16. jeroen says:

    Hi,
    Is it possible to scale the image in the thumb so that you see the whole picture instead of the the part of the top left corner?

    thanks

    • SteveG says:

      I was able to get this work, for anyone interested. It’s not elegant, but served my purposes.

      -on lines 179 and 188, change:
      ;background-image:url(‘+thumb+’)
      to
      ;background-image:url(‘+thumb+’.jpg)

      -then rename your thumbnails to the same as your large image plus .jpg. For example, car.jpg becomes car.jpg.jpg. If you’re using a different extension, then obviously change that.

      -The last step is to match your thumbnail size to the size listed in the scripts general settings.

      Apologies to the author for mutilating your nice code. ;) (but it works!)

  17. Jeremy says:

    How would you center the thumbnail carousel below the main carousel images. For example I have a 700px wide rotating banner. I would like to center the thumbnail carousel directly below the main image rather than it defaulting bottom left as it is now.

    Help/Thoughts appreciated.

  18. sqwale says:

    Hi im using the carousel and it doesnt seem to work when only one image is in the specified directory. You may wonder why i need this if im only displaying one image, well the images a user uploaded and thus a user may only upload one, so hence is there a bug fix?

    • admin says:

      A carousel of one image really isn’t a carousel is it? This carousel isn’t intended to work with a single image so I’d suggest not loading the carousel if there’s only one image to work with. I wouldn’t call this a bug either.

      • sqwale says:

        thanks great plugin by the way, im sorry if i came off as a bit ignorant. Not very skilled with jquery. So do you know any ways i can keep consistency with the carousel, i.e. hiding captions etc.

  19. Jess X says:

    Hi,

    This is a great plugin. Really easy to implement.
    My javascript knowledge is very basic, so I was just wondering how difficult it would be to get the captions to slide left or right with the thumbnails and whether I would be able to implement such a thing with a little instruction?

    Thanks again

    Jess

  20. Tomas says:

    Hello,
    I have problem with textholder background color. Is there any way to change whole text background? Not only p background at the best. I need not transparent color. Thank you.

    • Jonatas says:

      Olá Tomas,
      Eu mudei no arquivo “infinitecarousseu.js” (not jquery file), a linha:

      $(‘#textholder’+randID+’_'+i).height(imgHeight*o.textholderHeight).css({‘backgroundColor’:'#FFF’,'opacity’:’0.5′});

      O padrão é: backgroundColor’:'#FFF
      Mas pode alterar para, exemplo: backgroundColor’:'#000 <– é a cor black
      Ou outra cor no padrão web

  21. Jignesh says:

    Hi,
    i want to add left & right captions on particular images , how to do that…?

  22. Kristina says:

    This is a great slider and looks beautiful too! Just wondering if it is possible to have multiple rows of images on show at any time? I would like to use this to showcase my portfolio.
    Many thanks! :)

  23. yeahsisi says:

    Hi,
    I want to remove the pause.
    when i click left or right ,it paused, i want the script always autoplay ,how can i do this ?
    Thanks

  24. tobi says:

    working on a website and use ur infinite carousel plug in…version2, i discover that description text is transparent…and i want to increase its opacity… how do i do that?

  25. Jackie says:

    Using the jquery infinite carousel 2, is there a way to display the captions for images below the images and still have the caption stay with the appropirate image when any movement occurds?

Trackbacks/Pingbacks

  1. [...] jQuery Infinite Carousel – Version 2 released – Link. [...]

  2. [...] 1. Front page carousel – the image rotates and faded ‘Next’ & ‘Previous’ buttons allow the user to skip to the next promotion [made possible with CatchMyFame's Carousel 2] [...]

  3. [...] released an small update to the jQuery plugin Infinite Carousel 2. As reported by Ervin, there was a bug triggered by small transition times that caused the carousel to behave [...]

  4. [...] Catch My Flame: Infinite Caroursel – excellent slideshow/gallery software [...]

  5. [...] Download the brilliant Infinite Carousel 2 from CatchMyFame (this is the script that will do the sliding content), save the JS file as [...]

  6. [...] para descargar los archivos necesarios y ver las instrucciones de instalación: http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-2-released/ GA_googleAddAttr("AdOpt", "1"); GA_googleAddAttr("Origin", "other"); GA_googleAddAttr("LangId", [...]

  7. [...] Slider Details Slider Demo Download Script [...]

  8. [...] JQUERY INFINITE CAROUSEL-VERSION 2 | View demos [...]

  9. [...] Infinite Carousal Tagged: CSS, javascript, jquery, questions /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'easyjquery'; // required: replace example with your forum shortname var disqus_identifier = "e41c5b854376495123154defe7f01b78"; var disqus_url = "http://www.easyjquery.com/chrome-web-store-like-image-gallery/&quot;; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://&#039; + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); ← What are the “document” and “location” called in $(document) and $(location)? Changing URL when users visit with jQuery →   $(document).ready(function() { $.each($(".entry-content img"), function(index,img) { var width = parseInt($(img).attr("width")); if(width > 480) { $(img).css("width","100%") .css("height","auto"); } }); }); Easy jQuery API * Detect Visitors IP / Country / City * Bible Web API * Facebook Like To View Search for: [...]

  10. [...] about Infinite Carousel 2? Tagged: carousel, jquery, questions /* * * CONFIGURATION VARIABLES: EDIT BEFORE [...]

  11. [...] Infinite Carousel-version 2 Slider Details Slider Demo Download [...]

  12. [...] A slideshow is a very easy way of presenting images and on the homepage is a very good tactic of organizing and simplifying the information presented to the viewer. They can make a significant impact on the first impression of the viewer about your site. Sliders are found on almost all corporate websites. Also it is very easy for designers to incorporate their portfolios in a slideshow. Another popular trend is the carousel slideshow which very easy to create with a simple jQuery plugin and  you can use to enhance your web pages presenting your images with a nice and stylish carousel effect. A good source for an infinite carousel. [...]

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>