jQuery Infinite Carousel Plugin
Dec 29th, 2011 by admin
The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is.
Download
Download jquery.infinitecarousel.zip (version 3.0.3 – January 24, 2013)
What’s So Great About this Plugin?
- It’s just 11 Kb compressed
- Displays image and videos
- Captions and links
- New thumbnail options
- Cool new circular ring timer
- Keyboard navigation
- Callback functions
- No browser lag caused by moving between tabs
- Shortest path algorithm finds the shortest distance between images when using thumbnails to navigate.
- Works in all major browsers
- Reusable on multiple containers
- Completely free for commercial and non-commercial use (see license in plugin header)
Demos
- Example 1 and 1a – the most basic example and then the same set of images with multiple options changed
- Example 2 – a large example where three items are displayed at once and the carousel advances by two items at a time
- Example 3 – a demonstration of the peek effect applied via user CSS
- Example 4 – multiple carousels running simultaneously on one page
- Example 5 – a continuously running carousel with captions and links
- Example 6 – a carousel containing only videos form YouTube, Vimeo, and Funnyordie.
Notes
- Easing effects still require a separate jQuery easing plugin (I recommend http://gsgd.co.uk/sandbox/jquery/easing/), or adding easing code on your own.
Options
- transitionSpeed – the time (in milliseconds) a transition from one item to another should take (default 800)
- displayTime – the time (in milliseconds) an item should be displayed (default 6000)
- displayProgressRing – a Boolean value that shows or hides the progress ring in the upper right hand of the carousel (default true)
- progressRingColorOpacity – the color and opacity (in RGBa format) of the progress ring (default ’0,0,0,.5′)
- progressRingBackgroundOn – a Boolean value that shows or hides the progress ring background ring (default true
- progressRingBackgroundColorOpacity – the color and opacity (in RGBa format) of the progress ring background ring (default ’255,255,255,.5′)
- thumbnailType – the format of the item thumbnails (default ‘none’. Possible values are: ‘buttons’, ‘images’, ‘numbers’, ‘count’, or ‘none’)
- easeLeft – the easing method when the carousel moves to the left (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
- easeRight – the easing method when the carousel moves to the right (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
- imagePath – the path to the carousel’s navigation and playback control images (default ‘/js/infinitecarousel/images/’)
- inView – the number of items to be viewable at once (default 1)
- margin – the amount of margin to add around items (default 0)
- advance – the number of items to advance when a user clicks the left or right navigation buttons or the carousel is on autopilot (default 1)
- customClass – a name to be assigned to the carousel (or the carousel’s wrapper) that can be used for styling or scripting. The name will be prepended with “ic_” (default null)
- showControls – a Boolean value that shows or hides the play/pause controls (default true)
- autoHideCaptions – a Boolean values that hides captions between transitions ( default false)
- autoPilot – a Boolean value that moves the carousel automatically when the page loads (default false)
- prevNextInternal – a Boolean value that places the left/right navigation arrows inside or outside the carousel (default true)
- internalThumbnails – a Boolean values that determines whether the thumbnails are placed inside or below the carousel (default false)
- enableKeyboardNav – a Boolean value that enables or disables keyboard navigation. The left and right keys mimic the left and right arrows of the carousel, p pauses playback and s starts playback (default true).
- onSlideStart – default function(){},
- onSlideEnd – default function(){},
- onPauseClick – default function(){},
- onPlayClick – default function(){}
HTML
- An unordered list should contain your items (images, videos, or a mix).
- All items in the list must have the same dimensions which must be set
- Images can be wrapped with links
- Captions must be contained in paragraph tags and come after the image
- User CSS now controls the look of the thumbnails
- Video can have their own thumbnails by adding a longdesc attribute to them.
Ex: <ul id="carousel"> <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li> <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li> <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li> </ul>
Instantiating
- $(‘#carousel’).infiniteCarousel({});
CSS Classes
- .ic_caption – styles the captions
- .ic_button – styles thumbnails
- .ic_active – styles the active thumbnail containers
- .ic_thumbnails – styles the div that holds the thumbnails
Hello again.,
I am trying to resize the carousel to match the width of my images. My image dimensions are 690px x 248px (width x height). I tried using Rey’s response to a similar issue (see above on October 27, 2012) as my method for handling this, but I received an error. I am not sure what I am doing wrong this time. Can you help me with this? The URL to my version of the carousel is below. Thank you.
http://www.naa.org/api/transformation-tour-slide/index-internet-2.html
Hi, I had some issues with implementing this for Youtube. I am pulling in the Youtube thumbnails for the carousel items (using the http://img.youtube.com/vi/{video ID}/0.jpg link), and then link to the actual Youtube video. Line 84 of the plugin will check for “youtube.com” in the carousel element, and if found, it will be wrapped in an iFrame, scrollbars are added and clicking the image will link to that image. That should not happen for the thumbnail images hosted on youtube.com (imho).
This plug-in just rocks!
I’m an absolute noob. Mind if i ask where the instructions are?
wow brilliant nice work i really appreciate this. keep it up.
Hi,
this plugin is greet,but i have some issue for example in demo here example 1 and 1a page, when i click s many time in the keyboard,the carousel will loop fast and in end will just diplay empty.
sorry for my english
for short how will i disabled the function in keyboard?
Hi sorry about my recent post,I disabled the enableKeyboardNav: true to false, because i have login and if my user have user like sussan it happend the fast thing.
thanks
I am using the plugin to rotate through an unordered list of wordpress posts content, of which the content of each post is just an image with a link on the image. I set the links to open in a new window but for some reason, the plugin strips the target=”_blank” attribute of the A HREF tag. Is there a way for the plugin to not remove those tags?
How can I hide ie_timer bar?
How can I alert the ID or “alt”-tag of current image?
You can hide it setting “showControls” to false in the file jquery.infinitecarousel3.min.js at line 10, good luck !
Hi
This is very nice, almost exactly what I was looking for.
Just one question. I have noticed that the width of the frame for each images is take from the first image from the list.
My problem is that I have images of the same height, but not the same width. One is 100px the other image 200px.
The slider works, but every frame is as wide as the first image in the slider.
Is there a way to have different width images float right beside each other?
My site
I need to slide html content, how it can help me.
Thanks, this is really useful.
Do you know how can I stop Youtube video from playing when selecting the next?
It sometimes stop and sometimes not.
Regarding the jQuery Infinite Carousel Plugin: Our company remodels homes. I have a batch of before & after images of siding jobs that makes each home look dramatically better. Can you set up two synchronous Carousel windows? One above the other. When advancing/retreating images, the two windows advance/retreat together, in sync? Whichever arrow is clicked on in both windows will move both images.
Is it possible? Yes. Is it built-in? No. You’d need some extra jQuery to handle that. You may also want to look into the Before/After plugin.
Is it possible to wrap text around a thumbnail using this. And also to add an ajax loader?
If so, could you point the way for me how to do it?
Thanks for the plugin, just downloaded it and will try to implement later
Hi there, your plugin appears in the Tiki Wiki CMS Groupware and I was wondering if you could give me some hints as to how to integrate it into my Tiki page. Essentially I want the carousel to appear across the top of my Tiki homepage, but I want it to span across the top of the page, how could I do this. Also is there CSS I could modify within the Tiki Wiki installation?
Sorry Matthew but I wasn’t involved with that integration.
Hi there, i would like to know how to add a transition effect to the images, like you have in other plugins you made.
Thnaks..
Juan Manuel
Webmaster – Aliweb
That would be more of an image crossfader than a carousel. Have you checked out the Panel Gallery plugin I have?
I am sure I am missing something obvious. The carousel seems to be zooming and not centering the photos? How to just have it scale them properly.
Hey all,
Can we move the play pause button to bottom left or right?
Need the help quick.
Thanks in advance.
This is excellent slider and very helpful for all developers
I am using the infinitecarousel ver 2.0.2 on the following url:
http://velveteyewear.com/5-optical
At the top portion of the page is a banner type image. It is a series of small thumbnails put together as one long horizonal image. I have 4 of these images total named bar_01.jpg, bar_02.jpg, bar_03.jpg and bar_04.jpg. I see that that carousel moves from bar_01.jpg to bar_02.jpg then stops the slide show. I have now idea why.
I have played with the settings several times but cannot get the slide show to continue scrolling. I just discovered one more thing right before clicking submit on this comment.
When I try to right click on the image and save it as it is sliding across the screen I can see that 3 images appear in the dlier, bar_01.jpg, bar_02.jpg, bar_03.jpg but not bar_04.jpg. This morning I was trying to add 4 more images to the carousel and that is how I ran into this issue. No images after bar_03.jpg appear in the slider.
Looks like you have a lot of scripts going on that page. When it loads I get two errors off the bat: [cycle] terminating; zero elements found by selector jquery.cycle.all.min.js:11 and Uncaught TypeError: Cannot read property ‘combi’ of null (neither of which come from infinite carousel). The first thing I would try is to setup a blank page with the carousel and get it running with your images. Then integrate your other plugins to see if there’s either some sort of compatibility issue, or error with another plugin.
Oh and version 3.0.3 is the latest.
Hi,
This is simply amazing and i was looking for this. Thanks a lot