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.
- A basic example with default settings
- Displaying and advancing more than one image at a time
- Displaying multiple images while advancing one at a time with easing effects
- Navigation outside the carousel with captions automatically hidden
- Thumbnails and navigation hidden. Keyboard navigation active
- Navigation automatically hidden with keyboard controls disabled. Also shows how to hint at the next and last images using CSS
- An example of callback functions
- An example of how easy it is to integrate with a lightbox plugin. Easing functions are also being used in this example
- 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.
that would be simpe
<a href rel="nofollow">tags .. oops on the same mistake as the poster above :PI feel like such a noob. Thanks ever so much for the quick reply and the amazing plugin!
Hello there,
first of all I would like to congratulate you on this amazing plugin, really outstanding work! have used it on my website in different variations and it’s coping really well. I have one issue though: what element do I need to style to change the position of the “Left/Right” – Nav Arrows? I would like to have the buttons further down – how can this be done?
Thank you.
Regards,
Sebastian
@Sebastian
The navigation buttons are positioned automatically to be centered vertically however you can hack them however you like. Look for the two lines that set the positioning:
html = '<div id="btn_rt'+randID+'" style="position:absolute;right:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat 0 0"></div>';
and make whatever changes you want.html += '<div id="btn_lt'+randID+'" style="position:absolute;left:2px;top:'+arrowsTop+'px;cursor:pointer;border:none;width:13px;height:30px;background:url('+o.imagePath+'leftright.gif) no-repeat -13px 0"></div>';
Hey I just noticed the the carousel also responds to my mouse’s back and forward buttons. Cool. Anyone else try this? Must be some automatic jQuery magic since I didn’t code that feature in explicitly.
Hey there :) Thank you so much for your reply! I have already gotten that far by altering the values in the .js file you are talking about, but the problem is now that I have another, smaller image slide on my subpages – the problem is that the left/right buttons don’t show up there since I’ve specified them to appear lower; which is ideal for my frontpage but not so much for the subpages :<
Any idea?
@Sebastian
I’d need to see it.
Mh Ill try and explain it. Since I edit the position of the arrows in the File “jquery.infinitecarousel2.js” and the file will be the only one called by the script it will take the settings for all picture sliders no matter what size the pics are.
Front page: 950x350px with arrows left/right at the bottom
Sub-Pages: 950x120px, picture starts exactly where FrontPage picture starts, but is shorter (>120px). Since I’ve configured the button placement in “// Prev/next button(img)” in the file “jquery.infinitecarousel2.js” to be at 315px from the top it will move the arrows further down on the shorter banner, hence making it invisible.
BUT: i just found a solution. Just included two different versions of “jquery.infinitecarousel2.js”:
1. _big
2._small
That allows me to call the big one for the Frontpage and the small one for all my subpages. Easy!
How do I position my thumbnails within the container? I’d like to move them up into the container, make them horizontal and slightly larger.
Great piece of work, well done!
It’s exactly the stuff I need for a website that I’m building (not online yet).
However, I was wondering if I discovered a bug related to the transition speed. I downloaded the second demo (“Displaying and advancing more than one image at a time”) and played with the settings and noted that if the transition speed drops to 400 milliseconds or below, the images are not displayed correctly. If the speed is increased to 500 milliseconds or above it’s working fine.
Try with these settings:
$(‘#carousel’).infiniteCarousel({
displayTime: 5000,
transitionSpeed:400,
inView:2,
advance:2,
imagePath: ‘resources/’,
textholderHeight : .25,
padding:’5px’
});
Note that the imagePath is changed (to suit my purposes). I tested the above on an iMac with the following browsers: Firefox 3.6.3, Opera 10.10 build 6795, Safari 4.0.5, Google Chrome 5.0.342.7 beta, and I’ve experienced the same issue with all these browsers.
I just thought I’d let you know. Other than that… it’s an awesome carousel, thanks!
Hmmm, interesting bug. I’ll have to look into that further for the next version.
Thanks mate and good luck!
Bug squashed. I’ll have an updated version up by tonight or tomorrow afternoon. Thanks.
This is a great product which i was looking for!!! Great Job!! Let me say this , 1st of all , I am a mainframe programmer and trying to play with web as i wanted to learn the new stuffs. I have two issues with my webpage.
1. The carousel images are 1st displaying in the web page one below another for few secs before the carousel starts. Everything is perfect after that. The timing is bad in IE8 and not that bad in other browsers. I am sure , my HTML tags might have some issue as I using Avanquest Webeasy software to build the site. Not sure how to fix it, though.
2. The text captions over the image is hidden. It’s just there…but not showing up. It worked good when I ran the demo in I.E. I could able to see the text when I highlight the image with the mouse, on my webpage
I believe, I may be missing some basic stuff here as I am new to web and using the 3rd party software to build the webpage. But, any help to address this issue greaty appriciated.
Thanks!
Sorry All. Looks like I had too much hight in the css. around 400. Cut and paste. I changed to to 500* 213… All good now. I yet to fix the text issue though. Thanks James for your input !
#carousel {
margin: 0 auto;
width: 500px;
height: 213px;
padding: 0;
overflow: scroll;
border: 2px solid #999;
Apperently you still have a small bug in IE7 and IE8. When you look closely in one of these browsers you see the text pixels of the div#textholder slide beneath the main wrapper of the slides when a new slide is loaded. It’s only 1 px in height and just above the thumbs. (just try the example on this page)
The problem I’m experiencing now in IE7 and IE8 is that some of those pixels remain in that 1px line beneath the main wrapper of the carousel.
I’m using the following settings:
$(‘#carousel’).infiniteCarousel({
displayThumbnails: 0,
inView: 3,
imagePath: ‘*’, (* = my personal image path of course)
textholderHeight: 0.19,
displayProgressBar: false
});
And I replaced the next and previous arrows with own images.
I tried some own coding, all with no success. Perhaps if you have time you could look into it?
Thanks
PS. Great script.
I think I see what you’re referring to, but it’s nearly imperceptible. I don’t see any text in the captions lingering after a transition either. And since the overflow property of the container is hidden, if somehow you see one pixel’s worth of text appearing in IE7 or IE8 then it would look to be a bug with those browsers (what a shock).
I’ve tried various solutions, none of them worked. It’s deffinitly an overflow:hidden / position: relative problem.
Perhaps you could consider implanting an option to prevent the caption animation in your next release?
Thanks for your reply btw,
Dries
Hello,
I absolutely LOVE this plugin! It does everything I wanted a carousel to do. The only thing I’m noticing is that the actual slide is a little choppy. I’ve always noticed this with JQuery I do. Are my images too large? I do have a preload function for the images. Any suggestions?
Thanks, Kelly
Also, can anyone tell my why this doesn’t work in IE7? I looked at the demos page in 7, but mine doesn’t work. What did I do wrong?
http://clients.ekcetera.com/vintagewearswares/index.php
Any help would be appreciated!
Hi, what can I do to let it work in Opera? I only get de images in a long row…
Thanks
MArk
An example of what you’re doing would help. The plugin works fine in Opera so the issue must be on your end.
Hi, I hope so that I am the problem….. ;-))
this is the site: http://cadeaubonnen.haaglandengifts.nl/
Can you see what I am doing wrong?
Mark
Hi, can you help me with my opera problem?
TNX
Mark
I’m so glad I’ve found a way to show rotating images! THANKS! Is there any way to display images randomly, or must they always go in the same order?
Well the images are displayed in the order that you place them when building the list of images, however you could randomize them when the page loads by using JavaScript to shuffle the array or the actual list of images itself. Shuffling the array would probably be a little easier but it would require that you tinker with the plugin, where shuffling the list of images could be done prior to calling the plugin but may take a little extra code.
Is there a possibility that the carousel can work with other content, for example block of text, or combination image+text in a div? The caption option in doesn’t give such freedom in handling the presentation.
Btw. This, as is, is great. Thanks a million! :)
Yes but you’d have to modify the plugin to do so. It looks for specific elements within the list, an image followed by text in a paragraph to be exact, but you could modify it to work with anything.
Nemanja,
Have you figured out a way to do this? I really need the text to scroll with the slide.
Thanks,
J
Is it possible to have the .textholder collapse to the left rather than the bottom? I am working with a 955px wide carousel and have set the .textholder to 375px wide.
Thanks!
Jeremiah
I need to set diferents displayTime for every Image in the carousel. Any solution?
I’d like to extend this to allow for dynamic loading of images as it cycles through. For example, 3 images are in the original DOM, but then more dynamically are added (perhaps from an array or another object). Any ideas on how to do this?
Thanks!
Hello
This is a really nice plug-in. Is there a way to control the plug-in from outside? like for example make it pause or play when a user clicks something else in the page. I tried to simulate a click on the pause/play button but it doesn’t work because the DIV tag doesn’t have the click() method.
Is there a way to do this without modifying the plug-in core?
There is a bug in the plug-in
Steps that will reproduce the bug:
1. Click any thumbnail for example the 4th of them (the plug-in pauses)
2. Click the play button to resume the play
3. Click another thumbnail for example the 2nd of them
4. Click the play button to resume play
What happens: The plug-in doesn’t resume the play
What was expected: The plug-in resumes the play and keep changing the images automatically.
This is a great plugin, very nicely put together and pretty robust too. However I can’t help but think that it would be much easier for developers implementing this plugin if all of the css wasnt stuck inside the js file. It makes for a lot of unnecessary inline styling and its really difficult to skin things like the nav buttons witohut hacking around in the js. I know it makes it so people can just add it into their site wihout worring about css, but it makes it difficult for people who want a bit more control over the styling.
But that aside its still an awesome plugin, thanks for all your hard work on it.
Hello,
Is there any way to make the thumbnails hot links? Clicking it once will take the user to the image it’s tied to. Is there any way to be able to create second set of clicks where the user will be taken to a specific page?
Thanks for the great plug in!
Terrific plugin! Thank you! One gripe though… I really wish there were an option to get rid of the play/pause button. I’m using it in a situation where a slideshow type behavior isn’t needed.
Try hiding them with CSS display:none
Plugin is working but when it loads it shows unstyled content on the page because the jquery has not finished loading. So I did some research and found this article:
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content#comments-title
When I implement this technique in the article the carousel does not display. It is in the sourcecode but for some reason the width and height of carousel is way to small of 40px instead of the width of 941px.
Anyone have any ideas??
Using this to add JS class:
document.documentElement.className = ‘js’;
Then I have this as my CSS:
.js .jqueryhide{display:none;}
html is like this:
Carousel content
This is to show content when javascript is turned on
$(‘body’).removeClass(‘jqueryhide’);
Try jquery spinner
Hi,
Nice work yet again. the only snag i run into is that the navigation images are i JS and not the css. When i try to strip them out of the js and put them into the css it’s not cross browser and fails in IE. Shame cause its a nice plug otherwise.
Is it possible (how difficult would it be) to display larger thumbnails, and vertically?
Hi. Very nice program. My husband and I were actually writing something like this last year to use on a family photography site we were putting together, but I had to abandon it when I got pregnant (I found it very hard to do AJAX when I was throwing up all the time from morning sickness! :-)) Anyway, could you please please tell me how I can set this to make the thumbnails show a minified version of the ENTIRE photo? It is only showing “parts” of the big photo, so you really dont have any way of knowing what the large/main photo is from looking at the thumbnail! This is probably in one of the settings strings, but silly me I can’t find it :-P
I hope you can help me– and thanks SO MUCH for writing this!!
~~Sam~~