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

314 thoughts on “jQuery Infinite Carousel Plugin”

  1. I don’t know if the question has already be posted… I would like to know if it is possible for the users, to reduce the caption… to see the entire picture. I use the Infinite Carousel on this website, but I don’t know how to add little button to reduce the caption if needed : Example Thanks for your answer.

  2. When i add larger image next/previous icons dont fit right.If anyone knows something please help.
    Thanks in advance.

  3. I spent some time getting the Infinite Carousel plugged in an styled only to find out the client now wants it to fade in rather than slide. Can this plugin do that?

    1. If you want fadeIn() and fadeOut(), search for the moveRight() and moveLeft() functions add fadeOut() in front of animate() and fadeIn() at the end of animate(). It should work, it worked for me.

  4. I was wondering if this supports image mapping in the slider. I’ve attempted it, but the links don’t seem to work. If anyone can explain if this supports image mapping links onto each image of the slider, and how it can work, that would be MUCH appreciated!

    1. Sorry if this is a bit late, but I have mapped images in my carousel. I’ve placed my mappings just before the as such:

      My Caption

  5. I’m implementing the carousel with videos and images, and have it set to autoplay. Is it possible to pause the carousel while the mouse is over it? The underlying issue is the carousel moving while videos are playing.

    Cheers

  6. Thanks for the awesome plugin, I have a little problem:
    The autopilot is set to true, ut the carousel only moves once and then stops !
    any ideas ?

  7. Can I put the images in vertical?
    All of yours caruousels have this form ####.
    I want to put on this other form:
    #
    #
    #
    #
    And the movement of the images go up or down not only left or right.

    Srry for bad english and thanks for this plugin

  8. Is there a way/parameter to add a caption to an embedded video (youtube specifically, or any others), then hide the caption while the video is playing?

    Awesome plugin! Thanks for any help you can provide.

  9. Many thanks for this wonderful plugin. I am using it on my site via iframe. How can I adjust, in which file and where do I have to adjust the code in order for my links ( a hrefs on the images) to open in a seperate window rather than in the frame (which is very small). Many thanks in advance and hope for your reply soon.

  10. I looked all over to find a carousel plugin that was easy to use while still giving my users what they wanted. This is a very useful tool for me. However, in this new version even though I am giving the width and height of the images it does not reduce or enlarge the picture to that size. Here is my code:

    img width=”300″ height=”300″ src=”http://someurl”
    img width=”300″ height=”300″ src=”http://someurl”

  11. I found the problem. It doesn’t look like it is using the width and height when it’s building the html. I changed this line from this:
    $(this).append(”);

    to this:
    $(this).append(”);

    and it’s working fine now.

  12. hello, could you please tell me how i could wrap the carousel or images into a link? i only need one link, to which they all lead, and i can’t seem to work it out myself.

  13. I have having problem implementing this wonderful carousel, as I am quite new to JQuery and I have been using the YouTube video (http://www.youtube.com/watch?v=P0PayS2r5M0) and (http://www.youtube.com/watch?v=aNaeF8K8Uuk). However, in the video, it implies script hooks must be placed in the relevant HTML doc. However, downloading the “jquery.infinitecarousel.zip” , it does not come with and txt files with script hooks, Please can anyone help? As I am making a gratis website for a charity.

Comments are closed.

A web developer's journal