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. Nasir says:

    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.

  2. Joel says:

    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.

  3. Sebastian says:

    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.

  4. Chen says:

    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

  5. moses omuno says:

    i just got it right ——–WOW! thanks

  6. john says:

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

Trackbacks/Pingbacks

  1. [...] Infinite Carousel Plugin – Com a mesma ideia do anterior mas como uma interface mais moderna e optimizada. Compatível com qualquer tipo de conteúdo e configurável. [...]

  2. [...] Infinite Carousel Plugin – Com a mesma ideia do anterior mas como uma interface mais moderna e optimizada. Compatível com qualquer tipo de conteúdo e configurável. [...]

  3. [...] jQuery Infinite Carousel Plugin – MORE INFO / DEMO [...]

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

  5. Jquery says:

    […] Fonte e demonstrações […]

  6. […] 40. jQuery Infinite Carousel Plugin MORE INFO / DEMO […]

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

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>