Feed on
Posts
Comments

Update: The latest version of this plugin can be found here.

Around the beginning of this month I released version 1.0.1 of the Infinite Carousel jQuery plugin. About a week later I received an email asking if I could add the ability for a visitor to jump to a specific image in the carousel. I’d seen this functionality in other carousels (none that run in infinite loops) where small images or some other user interface was displayed that allowed someone to pick an image and go directly to it. At first I thought sure, how hard could it be to enable this? If the current carousel could flow infinitely picture by picture, how difficult could it be to fast forward to a specific image in the sequence? Little did i realize what I was in for.

Creating a user interface to allow jumping around the sequence of images was the easy part. Version 1.2 of the infinite Carousel creates thumbnail gallery with several options which allows you to click on a small box and jump to an image. The hard part turned out to be how to handle the actual jumping. I initially thought that I could fast forward the existing process, basically figuring out how far the carousel needed to be moved, and then just repeatedly moving one frame at a time. This didn’t even come close to making it into the final code as the effect was not even close to passable. It even felt like cheating. So I went back to the drawing board and started from scratch.

What I ended up with is a very fluid, very clean image carousel that allows you to jump to any image in the series, while maintaining all the functionality of the original Infinite Carousel. To make a long story, and many hours of coding short, the latest version of the Infinite Carousel manipulates the DOM based on how far away the desired image is. In a nutshell, list items and the images contained within (and optionally captions) are cloned, moved around, and deleted while the overall list is animated. Sounds easy. It’s not.

The final product is this:

While much of the original Infinite Carousel plugin code was used in the latest version, the guts of moving images around was retooled. In addition, new options have been introduced to allow control over the thumbnails that can now be displayed below the carousel.

I will keep version 1.0.1 of the infinite carousel available at its original location in case anyone would like to continue to use it, while making version 1.2 available below.

Update (8/31/2009):  I just changed the license for this plugin to the share alike license (http://creativecommons.org/licenses/by-sa/3.0/us/), updated the image paths, and fixed a problem with IE7 and errant commas. No other changes were made however the version number is now 1.2.2.

Download

Download jquery.infinitecarousel-1_2.zip. (version 1.2.2 – 8/31/2009)

What’s So Great About this Plugin?

  • Unlike most carousel plugins which stop when they get to the last image,
    this one allows the show to go on infinitely without any user intervention.
    If you have three images you want to display, after the third image has been
    displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
  • Captions are optional.
  • Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence.
  • Thumbnails can be styled via CSS.
  • It’s less than 14K (a minified/compressed version will be available shortly).
  • Reusable on multiple containers within the same page.
  • You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

How to Use

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. 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.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. At a minimum, the following CSS should be included in any page where the carousel exists (remember to change the width):

#carousel ul {
	list-style: none;
	width:1600px;
	margin: 0;
	padding: 0;
	position:relative;
}
#carousel li {
	display:inline;
	float:left;
}

Be sure to check out the demos 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 1500)
  • 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: .2)
  • displayProgressBar – Boolean. Whether or not to display the progress bar (default: 1)
  • displayThumbnails – Boolean. Whether or not to display the thumbnails for the carousel. (default:  1)
  • displayThumbnailNumbers – Boolean. Whether or not to automatically place numbers in the thumbnail boxes. (default: 1)
  • displayThumbnailBackground – Boolean. Whether or not to use the corresponding image as the background for a thumbnail box. (default: 1)
  • 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)

Options are added when calling the script:

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

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!

Demos

  • Example 1
  • Example 2 (uses padding to hint at the previous and next images and larger thumbnails with no background images. The thumbnail container is also centered with CSS)

Note that the plugin uses several images which are kept in an images folder in the zip file (/js/infiniteCarousel/images/ by default). If you store the plugin in another folder on your server, update the path to these images.

Graceful Degradation

While almost everyone has JavaScript enabled in their browser you can use CSS to allow the plugin to degrade gracefully for those that don’t.

  • Setting the width, height, and overlflow on the container creates a view port to give those w/o JavaScript an approximation of what they’d see with JavaScript.
  • Setting a width of 9999px (or some large number equal to or greater than the combined width of all images) on the container, combined with setting the list to display inline and float left allows the list to display horizontally (leaving the width out would make the list scroll vertically)
  • Setting a height on the container equal to the height of the images plus some extra allows the captions to display

176 Responses to “jQuery Infinite Carousel Plugin 1.2 Released”

  1. k says:

    Hi, thanks for your plugin. I´m using jCarouselLite at the moment, because it was the only one, that was going circular/infinite. But i had to drop the slidecontainer into another div, apply overflow:hidden to the outer div and a negative margin to the slidecontainer to get the “hint”, because it put´s a extremly high number of repeating slides in a row wo achieve the effect. Now i´m thinking about switching from my 2kb lite-Version with a massive amount of html and css tweaks to your sollution… pls keep it alive.

  2. hatch says:

    Great clean plugin, with minimal coding.

    Managed to implement quite quickly. The only thing i want to be able to do is remove the controls… is this possible?

    So i want it to rotate but not display a next and previous arrow and also to omit the play and pause buttons.

    • admin says:

      @Jon
      Obviously a single click on the before/after plugin moves the divider to the click point. The plugin has the option to display links that will move the divider to the full before or full after position.

      @hatch
      Can you elaborate on what you mean when you said that you want to rotate but not display the prev/next arrows?

  3. Bob says:

    This is terrific and I appreciate the work that went into it. I have one quick question. I know it must be possible but I’m not having any success styling the captions using CSS.

    Am I missing something or must this be done in the script itself.

    Thanks again!

  4. admin says:

    @Bob
    Check out the source code for the demos. The caption box can be styled using the .textholder class to target the caption div. For example:
    .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;
    }

    The opacity is set in the plugin but you can override it or change it in the plugin itself.

  5. Bob says:

    Perfect. Thanks so much!

  6. Mathew says:

    Hi!
    Thanks for your hard work into actually making my request possible. After emailing you, I thought “He’s not going to bother – going to be busy”, but you surprised me when I had just those simple words “I’ll see what I can do”.

    Thank-you once again, really appreciated!

  7. Paul van Steenoven says:

    Hello, thank you for your carousel plug in. Its one of the few that goes into infinity (loops) and many carousels out there are disapproved with my clients due to jumping back to the 1st after you click next on the last slide. It is unprofessional in there eyes.

    Could you please introduce call back functions, so i can trigger custom code. I use in my work mostly triggers onScroll, onbeforeScroll and onSlide(n)

    Thank you again for your work!

  8. Bob says:

    Got another issue and it’s with IE 7. The plugin simply isn’t working.

    Here’ s a link to a page I’m running some tests on:

    http://www.theindesignguy.com/client_sites/IDG/index3.shtml

    It’s working in every other browser including IE8. I’m sure I’m missing something very simple but I could use another set of eyeballs.

  9. Bob says:

    Just a followup. I opened this blog in IE7 even the samples posted here aren’t working.

    • admin says:

      @Bob
      See what happens when I stick IE7 in the back of my drawer? I confirmed what you saw and discovered that two commas caused the problem. Try the demos again and download the updates version.

  10. Ben Delat says:

    Many thanks for the plugin. I don’t want to put words in other peoples mouths, but I thing what @hatch was saying is to have the carousel automatically scrolling (rotating) as it does, but to suppress the navigation arrows and the pause button. Maybe use the mouse-in, mouse-out to control the pause (as seen on a recent jquery for designers screencast).
    That would certainly match up with my needs.

    • admin says:

      @Ben
      Do you have a link to the screencast? I don’t see why the ability to hide the controls couldn’t become another option.

  11. Bob says:

    Excellent. I’ll download the update and give it a whirl!

  12. Steve says:

    Fantastic.

    I’ve been searching for something like this for ages. Flash was going to be my port of call but I wasn’t looking forward to it. So I’ve just downloaded it and will start playing straight away.

  13. Martin Hagedoorn says:

    Great plugin, really nice..

    I however have an request, when the slides transition from the one to another the controls disappear. Could u make an update so the controls always stay visible or instruct me how 2 adjust this?

  14. admin says:

    @Martin
    Sorry but that’s by design. If the controls were left up during image transitions, then any clicks on them would cause some bizarre after effects. I suppose it would be possible to unbind the events which are bound to those controls, but then that would give users the impression that they’re supposed to be usable while they’re there. By removing them it’s obvious that they’re not to be used.

  15. Ron says:

    Hi,

    Many, many thanks… I am working on trying to make this happen, but having a small problem in IE8. I have no idea what may be causing it. Works in FF, Safari…
    Degrades “ok” in IE8 with 1st pic, but that’s it. I still think what you have done is excellent!

    Webpage error details
    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 3 Sep 2009 17:33:48 UTC
    Message: Object doesn’t support this property or method
    Line: 68
    Char: 5
    Code: 0
    URI: …/js/infiniteCarousel/jquery.infinitecarousel.js
    (I put the 3 dots above next to URI, for now…) but you have my website. :-)

  16. Ron says:

    Update: got this to work, via an iframe… nothing wrong with this script (I don’t think)…

    Should’ve named javascript “fightingscript” like the Betta Splendens (fighting fish). Why?
    1. Doesn’t play well with others.
    2. Must create illusion that no other javascript exists except itself.
    3. IE is the instigating parent that promotes “fighting”.
    4. Doesn’t play well with others.

    :-)

  17. Ron says:

    Would anyone have any suggestions on a “wait” message until all images have completely loaded?

    I’m getting the non-css version for a couple of seconds before showing the finished porduct. Trying to avoid this.

  18. Guilherme says:

    Is it possible to remotely pause the carousel? I want it to automatically stop after two rounds, and I was thinking of simulating a click on the pause button. However, I can’t get there through the element ID because it has that “rand_id” variable, which I have no idea of how I can get it.

    • admin says:

      @Guilherme
      Inherently no, there’s no way to do that however you could probably set a counter that was incremented after X the last image was passed and once that counter hit your limit (2), then trigger the click even on the pause button.

  19. Guilherme says:

    Thanks :)

    To anyone who might also be interested, this is how I did it:

    if(curr==numImages)
    {
    curr=0;
    rounds ++;
    }

    if (rounds >= 2)
    {
    $(‘#pause_btn’ + randID).click();
    }

  20. Guilherme says:

    Forgot to mention: I updated the line that said “if(curr==numImages) curr=0;” to that code I posted above, and (obviously) I declared the “rounds” variable higher up in the code (after the defaults).

  21. tommy arnold says:

    Thanks for the plugin, is there a simple way of removing the left/right arrows? Or would I have to modify the code?

  22. Patrick says:

    Looks very very nice.
    And much love in the details like the backgrounds of the numbers!

  23. sagar says:

    Thanks for your nice plugin, Is it possible to disable automatic play function on first load.

    • admin says:

      @sagar
      To disable automatic play when the carousel loads, you can add
      $('#pause_btn'+randID).trigger('click');
      after line 291 of the plugin

      @Adam
      Since the carousel looks for paragraph tags after the image to use as the image’s caption, you could either change the plugin so it looks for a div instead of a paragraph and then any content within the div would server as a caption, or instead of using a heading tag, use a span tag within the paragraph and apply styling to it like font-size to make the selected text larger. Adding a heading tag as the plugin is coded now would either be ignored or invalid HTML if it occurred inside the paragraph.

Trackbacks/Pingbacks

  1. [...] jQuery Infinite Carousel Plugin | Demo [...]

  2. [...] jQuery Infinite Carousel Plugin [...]

  3. [...] 2. jQuery Infinite Carousel Plugin [...]

  4. [...] Infinite Carousel Plugin to allow jumping around the sequence of images was the easy part. Direct Link Live [...]

  5. [...] le plugin JQuery Infinite Carousel : ici Exemples : 1 et [...]

  6. [...] http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/ This script powers both the sliding ‘featured’ items on the homepage and the portfolio previews within the portfolio item pages. There are numerous sliding graphic jQuery scripts available, and I did experiment with several of them – but this one worked the best for my case. This script has been customised slightly on my website. [...]

  7. [...] Example Demo Page [...]

  8. [...] jQuery infinite Carousel plugin – Link. [...]

  9. [...] jQuery Infinite Carousel Plugin | Demo [...]

  10. [...] Playcast homepage features an incredibly lightweight javascript carousel by Catch My Fame which doesn’t require the browser to load any additional javascript libraries. And unlike [...]

  11. [...] JQuery Infinite Carousel Je vous en parle ici Un effet de Carrousel pour vos images en jQuery. Le site [...]

  12. [...] Infinite Carousel Un bellissimo plugin di jQuery che consente di creare gallerie d’immagini con effetto “carousel”. [...]