Feed on
Posts
Comments

jQuery Infinite Carousel Plugin

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

The other day, yet again, I went looking for a jQuery plugin that moved a set of images inside a display area. I’m not sure if this is a carousel, a gallery, a slideshow, or what. They all seem to share many common characteristics, but regardless I wasn’t able to find what I wanted, although I did find several different plugins that did part of what I wanted to do, which was to generate a simple unordered list of images and optionally have a caption for each one. If a visitor doesn’t have JavaScript enabled (yes both of them) they should still be able to see the images, but for the 99.9% of the web population that does have JavaScript enabled, they should get a simple, slick carousel of images.

So I set out to create my own plugin and here’s what I ended up with:

You can  move between images using the left and right arrows which when clicked, pauses the carousel. To restart the autopilot feature, just click the play button in the upper right hand corner. You can also obviously pause the show at any time by clicking the pause button in the same spot. Captions are optional. When the carousel is paused, you can minimize or close the caption window. The amount of time each image is displayed, as well as the length of time the transition between images takes are configurable. There’s a also an unobtrusive bar at the bottom of each image (which you can turn off) that shows how much time is left before an image changes.

Download

Download jquery.infinitecarousel.zip. (version 1.0.1 – 7/31/2009)

What’s So Great About this Plugin?

  • Unlike most carousel plugins which stop when the 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
  • It’s just 9K
  • Reusable on multiple containers
  • 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 right padding so that you can display a small amount of the previous and 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}. 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;
}

Check out the demos including the CSS for examples.

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)

Options are added when calling the script:

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

Enjoy!

Demos

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.

63 Responses to “jQuery Infinite Carousel Plugin”

  1. Vasily says:

    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. Victoria says:

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

  3. Robert Dunn says:

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

    Very nice plugin – thanks!

    rcd

  4. julia says:

    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. AbrahamBoray says:

    Just amazin’ this plugin’ , Just wot I was Lookin’ for =)
    Thx Buddy
    Abraham

  6. juila says:

    Thanks for the quick reply, unfortunately the project was put on hold for a while. I’ve just recently started working on it again but still can’t seem to figure out why the slide transitions aren’t working.
    this is our test site: http://www.sagegreenstyle.com/nobots/shakedown/

  7. Bob says:

    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!

  8. Ben says:

    It has got some major flaws in IE6

  9. admin says:

    LOL if you still care about IE6 you have “major flaws”. Time to move on.

  10. reverse says:

    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

  11. reverse says:

    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?

  12. Guy says:

    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 :)

  13. McQ says:

    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 :)

  14. McQ says:

    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!

  15. McQ says:

    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)

  16. McQ says:

    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]

  17. Amy says:

    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

    • admin says:

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

  18. TWP says:

    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.

  19. James says:

    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.

  20. Kingsley says:

    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

  21. Mihir says:

    Is there any way to use any other transition/animation effect? like blind or fold etc.

    • Bill says:

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

  22. Carolann says:

    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

  23. javaNoob says:

    First thanks for writing a really nice plugin. Though now I’m having problems getting it moving with IE, it’s probably a simple thing I’ve misplaced, here’s a link http://bit.ly/cmfzpq can anyone help, thanks.

  24. Bill says:

    Looks like you’re including jquery twice, once minimized and once unminimized:

    < script type="text/javascript" src="http://www.scrummagazine.com/wp-content/themes/scrum02/js/jquery-1.4.2.min.js">
    < script type="text/javascript" src="http://www.scrummagazine.com/wp-content/themes/scrum02/js/jquery.js">
    < script type="text/javascript" src="http://www.scrummagazine.com/wp-content/themes/scrum02/js/jquery.infinitecarousel2.js">

    Try removing the second script line.

  25. Luca says:

    Hi,

    Thank you so much for this great tutorial!
    I have it on my website and it comes out just like the example demo in the zip file, without any arrows and play/pause image. How can I add these to finish it?
    Thanx!

    Luca

Trackbacks/Pingbacks

  1. [...] Infinite Carousel 1.0.1 has been released. This new version, which can be downloaded from the jQuery Infinite Carousel page, fixes a few bugs, adds a new feature, and comes in a reorganized zip file with a [...]

  2. [...] much of the original Infinite Carousel plugin code was used in the latest version, the guts of moving images around was retooled. In addition, [...]

  3. [...] maybe someone might be able to help me and I wont have to resort to Flash. I used this Carousel: http://www.catchmyfame.com/2009/06/0…rousel-plugin/ I downloaded the plugin and added the first div into my body, the second part with the Jquery link [...]