Feed on
Posts
Comments

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

308 Responses to “jQuery Infinite Carousel Plugin”

  1. CJ says:

    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

  2. Ronald says:

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

  3. Carlos says:

    This plug-in just rocks!

  4. absolute.noob says:

    I’m an absolute noob. Mind if i ask where the instructions are?

  5. Mayank says:

    wow brilliant nice work i really appreciate this. keep it up.

  6. Geoffrey says:

    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

  7. Scott says:

    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?

  8. Artem says:

    How can I hide ie_timer bar?
    How can I alert the ID or “alt”-tag of current image?

  9. Peter says:

    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

  10. Nadeem Bhatti says:

    I need to slide html content, how it can help me.

  11. daniel says:

    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.

  12. David Kramer says:

    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.

    • admin says:

      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.

  13. Skonka says:

    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

  14. Matthew says:

    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?

  15. Aliweb says:

    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

  16. Rich Svienty says:

    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.

    • John Biggs says:

      I have the same issue.
      It seems to set the frame to the size i specified the images to be but keeps the original images the same size, so the effect is one of zooming in the top left corner of the images.

  17. Adil says:

    Hey all,
    Can we move the play pause button to bottom left or right?
    Need the help quick.
    Thanks in advance.

  18. This is excellent slider and very helpful for all developers

  19. Mandy says:

    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.

    • admin says:

      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.

    • admin says:

      Oh and version 3.0.3 is the latest.

  20. Rekha says:

    Hi,
    This is simply amazing and i was looking for this. Thanks a lot

  21. Designer says:

    Trying to implement the slider, i need to have a headline for the slides in addition to the captions.
    So basically i would like to have two captions, one on top, and second the regular description on the bottom.

    Can anyone tell me how to do this?

  22. Tim says:

    Great plugin, but the autoHideControls option is missing in version 3. Any chance you could add it back?

  23. robert says:

    i like this website. it helps alot

  24. ldkllr says:

    can anyone tell me its responsive or not

  25. Rodrigo says:

    caption not workin in IE7, help

Trackbacks/Pingbacks

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>