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. Cory Marsh says:

    sweet. Just what I was looking for my home page. You saved me a couple of hours, thanks! =P

  2. Adeptus says:

    Great & simple!
    Tnx *100!

    One more: you must add padding:0; and margin:0; to your #carousel li to fine display in any brousers…

  3. Matt says:

    Would be very nice if some extra transition effects could be added. Fading into the next image would be excellent.

  4. SJSD says:

    Is it possible to insert HTML like H-tags and A-tags in the textarea? I would like to style different text and insert a link.

  5. Mahes says:

    Hi
    The plugin is awsome to use it here I got some super banner gallery for my project.

    But one thing the Transition is not happening.

    If anybody pls help how to solve this..

  6. SJSD says:

    Hi Mahes. I had the same problem, untill I added the CSS. Look at the Example 2 and take a look at the style. Copy the style and play with it.

    My problem now is that I would like to add HTML-tags in the textarea. Hope I get an answer on the issue.

  7. admin says:

    @SJSD,
    Yes it’s possible. Edit the plugin on lines 57 and 107 to change .text to .html and any HTML in your paragraph captions will be rendered.

    @Matt,
    Such a plugin may exist but it would work differently than this one does. This one is based on the motion of consecutive images whereas a fade in/out could be done without all the DOM calculations and moving of elements.

  8. Great job, looking very sharp and was easy to implement! One suggestion: create a way to add links to each image subtitle…. Ive tryed to put a tag inside the tags and didnt work… BUT on the other hand, if you use a link in the IMAGE itself, works fine! Again, great job, keep it up!

  9. admin says:

    @Felipe
    Read post #7

  10. Lisa says:

    This plugin is awesome, and exactly what I need…
    And yet… this is the most irritating thing I’ve ever had to install on a page. If one thing was right, everything else was wrong. It might be just me, but I even tried installing it on it’s own on a page and it failed horribly. Nothing wrong with how it looks, just the ease of use.
    I tried looking at the code in your examples for hints, but they all have different code structures.
    Ah well. It could very well be just me.

    I don’t have anything up to show yet. Actually, right now I’ve got it the closest to what you have that I’ve ever had, and yet it’s still wrong. The wipes don’t work even if it does change images, and the buttons while they finally appear, really aren’t in the right spot. I will get it right though, even if it kills me, because if it ends up like what you have, then it’s totally worth it because so far this is the only plug in for jquery that has everything I want.

    I’m sorry if I sound so negative. I don’t mean to be. You’ve done more than I ever could do (NOT a programmer AT ALL).

  11. Lisa says:

    Actually, I was thinking I should leave a link to what I have, just in case.
    The whole site’s been making me mad, so. If you can spare me any agony, that would be wonderful.

    http://lisacerilli.nfshost.com/test2/index2.php

  12. Lisa says:

    Hi. Not to be annoying but I just thought I’d come back and thank the world for the help I’ve received on my problem. I thought I was too rambly for anyone, and yet I got the help I needed.
    Thank you. Thank you a million times more.
    And seriously? Keep up the good work.

  13. Anonymous says:

    NO dynamic loading of content via AJAX Http request?

  14. Ryan S says:

    Fantastic job! I look forward to adding on some additional features.

  15. this was nice!!!! thanks mate

  16. Teebee says:

    Seriously nice work with this plugin. One question though.. obviously it is possible to have multiple instances within one page by adding extra ids in the inline js, but is it at all possible to have different transition speeds applied to each instance?

  17. michael says:

    hello.
    totally rad and easy to use. however, i do have one question that has completely confused me beyond the realm of confusion itself. i have the slide show working, the transitions are smooth from image to image, the settings have been tweaked, etc. BUT, when loading the page for the first time (i have 5 total images) in the directory, the first image is blank, doesn’t load at all. the second image loads after the designated load time specified. once the images loop, the initial image then appears and continues to load normal / in the proper sequential order.

    am i missing something here? did the proverbial bitch slap has hit while i was sleeping?
    who knows.

    thanks.
    michael

  18. Rob says:

    Great plugin! I have something weird happening though. After the page has loaded the first image is not displayed. A split second before it changes to the next the image shows. From there on the first image shows in the rotation. This only happens when the page is loaded.

    Thinking its something obvious but I’ve been staring at code for 12 hours and things are starting to melt together….TIA

  19. michael says:

    i guess that would – http://enovateusa.com/test/

    thanks!

    • admin says:

      It’s your CSS. Make sure the CSS for the element containing the carousel has the proper width. What’s important is that your UL in the carousel container has a width that’s at least as wide as your images as if they were laid out horizontally. In other words, if you had three images and they were all 900px wide, set the width of the #carousel ul to 2700px.

      Try this


      #carousel {
      margin:0 auto;
      width:900px;
      height:320px;
      padding:0;
      overflow:scroll;
      border:2px solid #999;
      }
      #carousel ul {
      list-style: none;
      width:2700px;
      margin: 0;
      padding: 0;
      position:relative;
      }
      #carousel li {
      display:inline;
      float:left;
      }
      .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;
      }

      This is a deficiency in the documentation. I’ll be sure up update it.

  20. michael says:

    awesome! works perfectly. thank you for all your help.
    also, no thank you to my horrible grammar. wow.

    thanks again.

  21. Scott says:

    Hey! What a wonderful plugin. Thanks for putting this together for us all.

    One quick question though, I am using the plug in for more text than I think you intended. So, I’m setting the textholderheight to .8. With that much height the text drops down, but only a little, then is replaced on the next list item.

    Is there a way to force the caption line to drop all the way down?

    Thanks again for the plug in.

    • admin says:

      @Scott

      Try changing line 130 to

      // $('#textholder'+randID).animate({marginBottom:-imgHeight*.25+'px'},500);
      $('#textholder'+randID).animate({marginBottom:(-imgHeight*o.textholderHeight)-(correctTHHeight * 2)+'px'},500);

      Let me know if that resolves the issue.

  22. Scott says:

    @Admin

    That worked perfectly. I did it a little less eloquently by just changing .25 to .8. But of course that’s a lot less eloquent.

    I also changed to .html like SJSD had. I did find that there were two more lines to change though. I’m sorry but I don’t remember which lines now…But the first two lines only allowed html on the first slide, so I’m sure it’s in the loop somewhere.

    I’m using the plugin at my.chsknights.com/announcementsScroll.asp …it’s for scrolling announcements for my school’s website. I still have to fix the width of the ul, but it has to be done dynamically, so I haven’t tackled it yet.

    Thanks again!

  23. Gavin says:

    I cant get the buttons to work in Firefox or Safari…IE works fine (weird). I dont have the site published yet but if you have any ideas that would be great!! Thanks

  24. dreamsR4living says:

    Great plugin, one of the easiest carousel plugins I’ve seen lately. Friendly for designers. Building it into my website right now.

  25. Shiju says:

    ITS NOT WORKING PLS HELP ME

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 [...]