jQuery Infinite Carousel Plugin

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

313 thoughts on “jQuery Infinite Carousel Plugin”

  1. 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,

    Stefan

  2. 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?
    thanks
    Gerald

  3. 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?

    1. 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!

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

  5. 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?

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

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

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

      2. 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!

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

  9. 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?

      1. Unfortunately, the script edit you described earlier didn’t work on my BlogSpot site:
        http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/comment-page-2/#comment-5829

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

        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.

  10. 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"

  11. 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:
    http://3.bp.blogspot.com/-U01-1ZHZHIc/TyhJk9b1P5I/AAAAAAAAAMY/uy9bfQzu-K8/s1600/controls.png

    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?

    1. 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:
      if(w.showControls){a(r).append('')

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

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

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

      1. 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!!

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

  13. Hey,

    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!

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

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

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

        Works:
        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.

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

      3. 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!

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

  14. 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() {
    $(‘#carousel’).infiniteCarousel({})

    });

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

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

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

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

  15. Hi,
    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)

  16. 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?

    1. In the css, you have to edit the “.ic_caption” section.

      Download one of the demos that have captions. See the values in the “index.html” file. You will see the “.ic_caption” in the CSS section. There will be existing values controlling caption background/opacity/font etc.

      1. I did try that, I put -moz-border-radius:15px & -webkit-border-radius:15px; under the wrap div but no change. Any ideas?? Thanks alot

      2. Im sorry im not exactly sure how to view the code of that link. can you help? Thanks so much for your prompt responses throughout this conversation it is much appreciated.

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

      1. Is it possible? Yes. Is there a simple option to do that built-in to the plugin? No. You’d have to hack the code and hide the divs not in view.

  18. 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! :)

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

    2. You can change the src of the iframes to its original source. It causes the movie to stop.

      For example:
      return this.each(function () {
      //…
      var itemVideosId = []; // videos ids array
      //…

      $(‘#carousel > div.banner’).each(function (index) { // populate arrays
      //…
      itemVideosId.push($(this).find(‘iframe’).attr(‘id’)); // finds youtube and vimeo iframe sources
      });
      });

      $(‘.ic_left_nav img’, obj).on(‘click’, function (event) {
      stopAllVideos();
      //etc…
      });

      $(‘.ic_right_nav img’, obj).on(‘click’, function (event) {
      stopAllVideos();
      //etc..
      });

      function stopAllVideos() {
      for (var i = 0; i < itemVideosId.length; i++) {
      $("#" + itemVideosId[i]).attr("src", itemVideos[i]);
      }
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

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

A web developer's journal