Feed on

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


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


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


  • 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(){}


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


  • $(‘#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

308 Responses to “jQuery Infinite Carousel Plugin”

  1. Stefan says:

    Hi ,

    i was wonder if im using the carousel and showing five images, if i can dim the images (except) the one in the middle?

    thanks in advance,


  2. Gerald says:

    Hi, I am trying to use infiniteCarousel and I can see in Firebug the follwoing error
    $(“.ic_left_nav img”, obj).on is not a function
    [stop at error] $(‘.ic_left_nav img’,obj).on(‘click’, function(event){
    the error occurs at line 118 of jquery.infinitecarousel3.js
    Does someone has any idea how to solve this?

  3. Damon says:

    This is fantastic. Thanks so much for providing such a great product for free!! It’s helped me a lot.

  4. Hu Anderson says:

    I am having a problem implementing this in SharePoint. I no problem in a standard aspx page but in SharePoint is receive an error when trying to instance the carousel:
    Message: Object doesn’t support this property or method

    Any ideas?

    • Hu Anderson says:

      I was able to fix my issue, I had to add the reference to the js file in the asp:ScriptManager on the master page not on the page layout or the page itself.

      One more question is it possible to hide the carousel until the page is fully loaded?

      Awesome work!

  5. Scott says:

    Very nicely done!
    I do have one question Similar to Stefan’s above. Is there an identifier in the code for the current of active slide? Roughly put (if currSlide= then…). Not sure this is possible with the cloning loop.

    Many thanks for this excellent piece of work.

  6. Andreas says:

    Hi! Great script!

    Is it possible to make it wait to remove/move the first frame until there are three outside instead of two?

    Not sure if this was clear, but now it moves the current frame out so there are two to the left. The one before gets moved to the end. I would like it to always keep two on the left side.

    Maybe it could be possible to configure how many to keep there?

  7. Matt says:

    Anyway to use this together with your drop captions plugin? We have a small carousel and the captions of the image get in the way of the images themselves.

  8. Pat Benny says:

    The “circular ring timer” (also pause/play buttons) disappear when they’re above dark/black images. Probably because these controls are controlled black themselves.

    I’m afraid of editing these images for fear of messing up the circular animation.

    Can you suggest a fix for this problem?

    • admin says:

      You can style the ring with whatever colors you like.

      • Pat Benny says:

        Sorry for this newb question…but how would you style the ring?
        I’m assuming it’s not an image, because the download-package didn’t have it.
        I downloaded both one of the demos. But I can’t figure out what the ring is called in either the JS/HTML/CSS files.

      • admin says:

        It’s a canvas element. Look at the “ring” options in the plugin.

      • Pat Benny says:

        I feel like such an idiot. You mentioned “progressRingBackgroundColorOpacity” in the options on this page, and I didn’t even see it.
        Thanks for your help!

  9. Matías says:

    I’ve got a weird problem with the easing effect, and I think i’m using the one you adviced. What could be goin wrong? Thanks in advance, it’s a nice script mate.

  10. Pat Benny says:

    Another newb issue…
    I’m unable to save the example pages properly.

    In FireFox with ‘Mozilla Archive Format’ installed:
    - If I save with the “preserve scripts/source” option: Left/right navigation arrows are missing. Auto slide works.
    - If I save with the “faithful” option: The auto slide does not work. Left/right navigation arrows appear.

    Even if I use IE or FireFox’s default saves, the resulting saved webpage has problems with the java animations or buttons.

    Sorry for being such a bother, but could you please zip the examples as well? I’m not sure what’s wrong on my end, and I desperately need a reference to get infinite-carousel working on my Google-Blogger template.

  11. Pat Benny says:

    In all the examples…
    When the page loads, it displays ALL of the images at once & stacks them up vertically.
    The images are only grouped and hidden once the slider has finished loading.

    Is there any way to prevent this behaviour?

    • admin says:

      Either preload your images or load the page with $(window).load instead of $(document).ready.

      • Pat Benny says:

        Unfortunately, the script edit you described earlier didn’t work on my BlogSpot site:

        Then I did some random googling, and newbish experimenting. The following CSS edit seemed to have solved my problem:
        #carousel {

        With this CSS entry, there is no temporary appearance of multiple images. The slider simply loads as one unit, from the start.

        I’m not sure if this is a proper way to handle the situation. As I said, I’m a newb with the meagerest understanding of HTML/CSS/Jquery/etc.. Just thought I’d share it in case anyone else had same problem.

  12. Tom says:

    FYI, all the demos cause the following error to appear in Firebug

    "NetworkError: 404 Not Found - http://www.catchmyfame.com/jquery/infinitecarousel3/demo/images/wait.gif"

  13. Pat Benny says:

    Can someone please help me modify the Pause/Play/Ring area?
    I’ve been able to customize every part of my slider, except for this area.
    The way it’s coded in “jquery.infinitecarousel3.min.js” is too confusing for a novice like me.

    The default “controls.png” is very small, so I created my own custom version to match the look of my slider. The image maintains the proportions of the original “controls.png”, but obviously it’s blown up by many percentages:

    When I try to edit “jquery.infinitecarousel3.min.js” myself, I come across problems like:
    - Pause/Play shows as static image – does not switch between pause/play on click
    - Ring animation does not stretch to accommodate new dimensions of pause/play button

    Can anyone tell me the appropriate code to replace the default “controls.png” with my own?

    • Pat Benny says:

      Okay, after hours of torture…I finally got it to work!
      For the large pause/play image I linked to earlier, this edit seems to work:

      However, I could find no way of enlarging the circular ring animation. So disabled it in the call.

  14. bob2012 says:

    i’m having the same problem as Pat Benny.
    copied the sample code using FF, IE and Chrome.
    FF and Chrome gave me the LEFT, RIGHT arrow but no auto-slide.
    IE gave me AUTOSLIDE but no LEFT, RIGHT arrow.

    would be neat to include sample demo in the zip file.

    • admin says:

      The demos here are the same as you could pack into a zip file so why bloat the download? The issue you referred to was related to the circle timer. Yours sounds different. Can you post a link to an example? If the demos here work for you but not on your own site, then you’re making a mistake somewhere.

      • bob2012 says:

        thanks for the prompt response.

        i’m still testing it inside Dreamweaver cs5.5.
        i figured….if it doesn’t work properly inside Dreamweaver, there’s no chance it will work on the live server.

        anyhow, appreciated your hard work and the free plug-in. more appreciated if you can send me the sample HTML that you used for your demos. that way, i can check and compare my code to see what went wrong!!

      • bob2012 says:

        i figured out the problem now.
        the reason the CONTROL IMAGES didn’t show up because the IMAGE PATH incorrect.

  15. Nag says:


    You’ve given examples of loading video from YouTube etc. but how about if I wanted to host videos on my own site? Flash videos, loading with

    Would it just work the same way as Iframes?

    Thanks for the help.. and the script!

    • Nag says:

      My comment above blanked out the code, so here it is without the brackets

      object id=”kevin” width=”640″ height=”360″ pluginspage=”http://www.adobe.com/go/getflashplayer” /></object

    • admin says:

      The plugin looks for iframe tags so you’d either need to hack it to look for your object tags or serve up iframe code in the same manner as youtube, vimeo, funnyordie etc.

      • Nag says:

        Thanks for responding. I’ve been thinking of ways to get this working, and I wanted to get your thoughts on this:

        how about using an onclick event to launch a video overlay? I tried this:
        img width=”376″ height=”300″ alt=”" src=”/images/home.jpg” onclick=”videoOverlay(1);”
        but it didn’t work.

        When I put the same image onto the page with a simple img tag, it works just fine, so I know it’s not the video overlay code that’s the issue.

        img src=”/images/home.jpg” onclick=”videoOverlay(1);”

        Does your script allow for onclick events on the image? I read the script, and I see click events for play, pause and navigate, and I’m guessing that the image isn’t allowed to have a onclick event

        I’m not an expert at JS, so please bear with me as I try and figure this out.

      • Nag says:

        Ok, so after further trying I see this behaviour:

        The onclick event works perfectly when it’s used inside the a href for the caption. So I can have an image with a caption, and clicking the caption launches the video overlay.

        However, the onclick event does not work within the a href for the image. I can link an image to another page, and that works fine, but the overlay does not launch.

      • Nag says:

        I figured it out.
        You’re creating the link dynamically when you populate the img array. The code drops the onclick event. If I add the onclick event into the source code, it works.

        So now I’m going to have to figure out how to create another array to store the value of the video(x), and then use that to create the link. Wish me luck!

        if(links[index]!=undefined) $(‘img’,this).wrap(‘‘);

  16. Bobby-James says:

    I would consider myself to be an amateur on jquery. I cant seem to figure out why my slideshow won’t work. It consolidates all the images to show just the front image but no sliding effect takes place, I can see the arrows also but nothing occurs when i click on them. Any ideas why it won’t auto slide to the next image?
    Ive included the following in my head :

    $(function() {


    I have also confirmed that the dimensions are exact for each image. any suggestions are greatly appreciated.

    • Bobby-James says:

      For the record i also included the following in my Head

      • Bobby-James says:

        ok for some reason your system won’t allow me to paste script tags but i did include script tags in my head.

    • admin says:

      A link to your page would help.

      • Bobby-James says:

        Unfortunately the page is not on a server it is on dreamweaver. All i can say is that when originally create its all the images in line with each image to the right of the next one. once i add the script text it displays just the front image with the arrows but it doesn’t scroll and the arrows don’t click

    • Nag says:

      You also need to copy the easing script and put that in your path..
      try this:
      script src=”http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js”>/script

      with the proper tags in your head

  17. Bary says:

    THX for an script but is it possible this? I have carousel on ma header.php and it is load after clicking any page FROM FIRST IMAGE. Is it possible to add some jquery code to carousel remember where continue after clicking into next page? So all images has the smae chance to be vissible? (for example if you have 10 images and visitor stay just a few second on homepage a clicking through the website he allways see the first image)

    Thanks for an answer (PS I am not jQuery coder so I am asking)

  18. Brick says:

    Hey thanks for the script. one question; is there a way to make the sliding effect a fading effect if so how? thanks

  19. Jason says:

    Hi, can anyone tell me how to customize the caption option. At this point when i enter a tag under the tag the carousel only display the text inside that tag. I am trying to add a transparent overlay. Can anyone help?

  20. Karla says:

    If you are using the peek padding to give a small preview of the next and or previous images is it possible to get only the caption of the fully visible image to load? Currently, captions of even partially visible images appear which isn’t ideal. Thanks.

  21. Michel says:

    Is there some way to stop the youtube movie clip, when you clicking the the arrow or thumb nail?
    it´s kind of inoying to have 3 youtube videos playing at the same time! :)

    • admin says:

      There’s nothing built-in for this and I think the only way to do that would be to tie the change event into the YouTube API so that changing the carousel stopped all movies.

  22. mark says:

    Hi, First this is a great script…you have done a great job and it’s only getting better!! Is there a way of shall I say how hard would it be to make the images fade in and out. Thanks for some great work!!!!

  23. mark says:

    Hey…sorry just saw a prev post….thanks!!!!

  24. Danny says:

    Hi, I implemented this plugin (2.02 Version tho) It works great but I have one problem. The script doesn’t load for IE. Can you please help me with this error?

    The slider is at “As it seen” section



  25. DCDude says:

    Is is it possible to center the thumbnails below the carousel?


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

  2. [...] jQuery Carousel Plugin* * *CarouFredSel – a Flexible and Powerful jQuery Carousel Plugin* * *jQuery Infinite Carousel Plugin* * *jQuery UI Image Carousel Plugin* * *AnythingSlider jQuery Plugin* * *Moving Boxes* * [...]

  3. [...] MORE INFO / DEMO (free plugin) [...]

  4. [...] Update: the latest version of the Infinite Carousel plugin can be found here. [...]

  5. [...] MAIS INFO / DEMO (plugin gratuito) [...]

  6. [...] MORE INFO / DEMO (free plugin) [...]

  7. [...] image is displayed), we can get it to hover above the image.jQuery Infinite Carousel Plugin – MORE INFO / DEMOUnlike most carousel plugins which stop when they get to the last image, this one allows the show to [...]

  8. [...] Infinite Carousel displays your images in a continuous loop. [Demo] [...]

  9. [...] Grab the latest version from http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-infinite-carousel-plugin/ [...]

  10. [...] jQuery Infinite Carousel Plugin [...]

  11. [...] میتونید دانلودش کنید و البته نیاز به شخصی سازی داره . Catch My Fame پاسخ با نقل [...]

  12. [...] More Details || Demo [...]

  13. [...] Put your images and videos on display with the jQuery Infinite Carousel plugin. Download jQuery Infinite Carousel [...]

  14. [...] MAIS INFO / DEMO (plugin gratuito) [...]

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>