NotOneBit Blog

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

Huge Updates to jQuery Infinite Carousel – Version 2 Released

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.

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

  1. Hi
    First of thanks a lot for such a beautiful script.
    Somehow the font size or styling of the caption is not working. I created a separate css rule to target the captions but it is not working at all. Do I have to change any settings in plug-in and also how can I disable captions if I have to.

    Thanks

  2. I found this really easy to setup but immediately noticed it isn’t as smooth as the one I was trying to upgrade from jqueryfordesigners . That one uses the browser’s page scroll thing so it’s so much smoother.

    1. Sorry to hear that. The carousel you described stutters for me and doesnt have the features of my carousel. Plus it also seems to work fine for everyone else. Oh, and the carousel you pointed to doesn’t use the browser’s “scroll thing”; it uses the same jQuery functions that all jquery carousels use.

  3. This is an awesome plugin. Thanks so much for sharing it. Question — Would it be possible to change the image transition from the linear slide to a fade effect?

  4. Hey, your plugin is great, and I really appreciate the easy to understand documentation. One question, is there a way to style the thumbnail div? I can apply CSS only to the “current” thumbnail. I’d like to be able to re-position the entire div and play with it’s styling etc.
    Thanks.

  5. Hi there!

    Thank you for this very easy to use Jquery carousel!
    I would like to have the picture change by fade, how can I do this?
    Thank you,

    Luca

  6. Hi there,

    Thanks you for this wonderful plug-in.
    Is there a way to ‘destroy’ a carousel while it’s on the page? I’d like to replace an existing carousel with another, but the first one still seems to be running.
    This is what I’ve got now:
    $(‘#carousel’).html(”).next().html(”);
    $(‘#carousel’).append(”);
    fillCarousel(url);
    showCarousel();
    Where fillCarousel() gets the new images and showCarousel() initiates a new carousel

    I hope you can help me with this.

    Cheers, Doc

    1. I’m sorry I was too quick. I already found it:
      $(‘#carousel’).next().remove(); $(‘#carousel’).remove();
      does the trick.
      remove() removes the element and all jQuery constructs (data, eventhandlers, etc.) attached to it as well

  7. Hi,
    I really love your infinite carousel. I have two questions though. How can I change or point the thumbnails with a different image, and second is there also a way to change the images for the previous and next buttons which i will slice from my psd file.

    Thanks in advance.

    1. I’ve been trying as well to figure out how to reduce the thumbnail background image. By default, it calls the original image at its actual size. I want to reduce proportionately to the size of the thumbnail. If anyone has figured it out, that would be great. Thanks!

  8. hi there
    first of all thanks for a great plugin.
    second, i found a small “bug” with RTL pages.
    as soon as you add dir=rtl to the HTML element, the carousel is gone.
    a quick fix for it is to add dir=”ltr” to the container div.

  9. Hi! At first, thanks a lot for useful plugin, but I have an issue: its needed to load pictures lazily via AJAX. How can I do this?

  10. First – great script!
    Q. Can you explain why the images must be all the same size?
    Is it because you need to specify a fixed ‘jump’ distance?
    Wishlist:
    1. err variable image sizes ;-)
    2. Scrolling direction (demo9) vary with mouseover (ie hover left = scroll left, etc.)
    3. A WordPress plugin… :-))
    Many thanks for sharing, Mike

  11. Oh and I forgot to say/ask if the reason for having all images of equal size is due to the ‘jump’ when advancing, then when scrolling image proportions should not be an issue (and therefore a sort of workaround..)?
    Mike

    1. The images need to be the same size or else they won’t fit within the container properly. I suppose you could add code that resized the container but I’ve seen that effect done and it’s not a favorite of mine.

  12. Great plugin! Thanks! It is, however, not working for me in IE. I see only one mention in this thread. Has anyone found a solution? The error message I’m getting really makes no sense either. I’m getting an ‘Invalid Argument’ error in the core jQuery js, not in the carousel js… when I look up the line/character that IE is telling me, it makes no sense. And if I revert to older releases of jQuery (1.4.3, 1.4.2, etc.), same ‘Invalid Argument’ on different line numbers. If anyone has found a solution, please post a comment. Thanks!!

  13. First this is a great plugin. I made one change to the location of the thumbnails to be on the lower right of the images. This is an awesome plugin……
    In other news……I ran into a strange situation using this plugin on IE. if you use a touchpad (on a laptop) and use the forward or backward buttons then use the horizontal scroll on the touch pad, the images slide to the left, which messes up the location of the images on the carousel. I know this is a 1 in 200 chance of encountering this. But I’m not sure if there is a attribute (CSS) that would prevent this.

    Thanks for the great work!

  14. First, as others have said, absolutely great plugin, was so pleased when I found it as it was perfect for replace some very out of date slideshows I had. Managed to get it working perfectly, and quickly.
    However, my issue is that Im trying to use 2 on 1 page. I can get 2 loaded by having divs with carousel and carousel2 as IDs, work great but the controls do not. The top one is half the size of the 2nd one. But the controls for both seem to get their placement based on the height of the images in the 2nd one. So what results is the top slideshow has controls that are well belove the images and the 2nd one is fine. If I delete the 2nd one, the controls for the first one appear perfectly, middle left/right of each image.
    If you understood all that, is there a hack I can use to reposition the controls for the first slideshow?

  15. on next button the animation stops. on prev button too. i don’t have a idea how to make different. When i press next the animation should get next picture and autoscroll , how can i do this ?

    1. Yeah, in this question I would wish a solution, too. I want use the thumbnails, but the automatically switch stops on thumbnail-click. It should only reset the time and than go on. Ist this possible and how?!
      Best Regards
      Steffen

  16. Hi,
    Thank you for this great job, But I try to make the Carousel on the right side of page, I tried this many time and I am not succeed, I try this choice : but it didn’t work, what I have to do to overcome this glitch ????????

  17. thanx for the nice script. I want to inject the carousel ul via ajax by an jquery routine. But it does not display well. I think, the

    $(function(){
    $('#carousel').infiniteCarousel();
    });

    is not called after the injection. In an static document it works well. But I dont know, how to recall the initialisation. Any help?

  18. The plugin is great. There is just one thing I would like to have more: Dynamic. I’d like to make a slider that shows 10 images and maybe 3 at a time. When the slider would reach at the end of the slide, it would load 10 more images to the end of the slider by ajax. If I’d have like 100 images it would take quite alot of bandwidth to load all the 100 if user isnt going to view but only 10 of them. This would also nicely allow users to use some image apis to load pictures from somewhere else.

    I have tried about 10 different image sliders and all them seems to be somehow buggy, but I couldn’t find any bugs from this so Gj.

  19. Hi, I found you plugin pretty impressive, I’m looking for to pause from external buttons the carousel? Is this even possible? I noticed you included couple of callbacks but I’m thinking in something more like:

    carouselHolder = $(‘#carousel’).infiniteCarousel();
    carouselHolder.stop();
    carouselHolder.play();

    Please, any help will be highly appreciated with this.

Leave a Reply

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

%d bloggers like this: