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.
Related posts:
sweet. Just what I was looking for my home page. You saved me a couple of hours, thanks! =P
Great & simple!
Tnx *100!
One more: you must add padding:0; and margin:0; to your #carousel li to fine display in any brousers…
Would be very nice if some extra transition effects could be added. Fading into the next image would be excellent.
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.
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..
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.
@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.
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!
@Felipe
Read post #7
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).
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
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.
NO dynamic loading of content via AJAX Http request?
Fantastic job! I look forward to adding on some additional features.
[...] Infinite Carousel [...]
this was nice!!!! thanks mate
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?
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
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
@michael and @Rob
Links to where you have the plugin setup would be helpful.
i guess that would – http://enovateusa.com/test/
thanks!
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.
awesome! works perfectly. thank you for all your help.
also, no thank you to my horrible grammar. wow.
thanks again.
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.
@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.
@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!
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
@Gavin
A link would help
Great plugin, one of the easiest carousel plugins I’ve seen lately. Friendly for designers. Building it into my website right now.
ITS NOT WORKING PLS HELP ME
[...] 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 [...]
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!
Hello! I like your plugin.
How can I get get smooth animation effect (i.e. image scrolling without delay) ?
Thanks!
Prev/Next buttons not working in Firefox but do work in IE. Any suggestions?
Very nice plugin – thanks!
rcd
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!!
@julia
A link would be quite helpful. Email me if you’d rather not post.
Just amazin’ this plugin’ , Just wot I was Lookin’ for =)
Thx Buddy
Abraham
[...] much of the original Infinite Carousel plugin code was used in the latest version, the guts of moving images around was retooled. In addition, [...]
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/
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!
It has got some major flaws in IE6
LOL if you still care about IE6 you have “major flaws”. Time to move on.
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
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?
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 :)
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 :)
@McQ
A link to your page would be helpful. I see you also posted on squarespcae’s forum so maybe someone there has your answer.
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!
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)
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]
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
@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.
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.
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.
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
Is there any way to use any other transition/animation effect? like blind or fold etc.
That’s not a carousel. I carousel moves the images. You’re looking for a fader or gallery which is different.