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. For mobile friend sites how can you make the width resizable/auto?

    and whats the best way to populate it from a folder? I’m trying:

    and then

    <img width= "300" height="250" src="” alt=”” />

  2. Hello!
    Infinite Carousel is a great plugin! I am using it right now for a project. I need to use a black and white image as the default thumbnail and a colored one as the active (current slide) thumbnail.
    I tried to do this:
    for the default thumbnail
    and
    for the active thumbnail
    What I tried did not work. Can you please help me, give me a hint?
    Thank you!

  3. Hello! I love the plugin. I have used it successfully. Can you please tell me how to make the images cross-fade.

    Thank you!

  4. Can the infinite carousel be used in conjunction with the Before & After plugin? Each pair of before/after photos would be one slide…

  5. hi i have a quick question, i find this is very very helpful, i have to add one more thing to this slider, while its slides right and left, if some one click on one image background grey out and enlarge the current image which is clicked.

  6. This plugin has a proble and nobody mentioned it. Whenever i press S key it starts automatically and you can not stop it. Since i applied this to contact form according to client requirement. Any solution for this problem coz once it started it cannot be stoped which makes this pluging a pain.

    1. Maybe you should try reading before saying something has a problem. The plugin has an option for keyboard navigation that you can disable (enableKeyboardNav).

  7. Hi. Thanks for such a nice jquery plugin. I have checked by running the script and it works fine with me. Only I want a favour from yourside. Could you can upload or give some help to change default rotation of “jquery-infinite-carousel” from Left To Right. Currently its default is from Right to Left. But I have a project in which I have to show images from Left to Right direction. I tried by changing it from your js file in animatedTimer function(). I replace moveleft() to moveright() function but it doesn’t work. Can u help me to solve this issue. Thanks.

  8. I am using this plugin for YouTube videos and I can not figure out how to prevent the videos from loading all at once. This really causes the page to load exceedingly slow. Please let me know if there is a way to load one video at a time. Sorry if I explained that poorly. I will elaborate if needed. Thanks in advance.

  9. Pingback: Jquery
  10. Thanks for the great plugin. Two useful and extremely easy to implement options to consider:
    - hideNavigationOnBlur – boolean whether left/right navigation should hide when mouse is leaving carousel container. Right now it is always “true”.
    - continueAutoPilot – boolean value that tells whether carousel should continue playing slideshow after manually navigating slides or not. Right now it just stops after manual navigation.

  11. Hi Guys,

    Is anyone can help me?
    I cannot understand how to show the carousel correctly.
    I’m trying to create the images and videos dynamically with no luck, also I couldn’t find any real example that can be downloaded and work without any change.

    Best regards,
    Chen

    1. Hi,

      Finally found the issue.
      The plug-in doesn’t work with dir=”rtl” ?
      Can anyone tell why?

      Thanks,
      Chen

  12. Is there an index.html and slider.css file for this work. Any instructions would be appreciated.

  13. I am trying to add this to a Sharepoint web part (custom web part created in Visual Studio 2010) but when I finished your first video it did not function. I have added the js file to my 14/TEMPLATE/LAYOUTS/1033 file and added the line in my master page for the ScriptLink. First I added the script lilne to call the infiniteCarousel() to my html code. It didn’t work. Then I remove the html code and added a line to register the script in my code behind and that didn’t work either. Any suggestions?

Comments are closed.

A web developer's journal