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. Please, help me.
    I need carousel with 3 images in line. But 2 images on sides should be with opacity 0.5.
    How can I do that?

  2. Hi.

    I have coded this into my site and it all works great, only one problem. the left/right nav arrows dont display. The nav function is there as I can hover over the spot where they should be and the are there, just not visible. Has anyone else had this problem?

    1. I would advise you to double check the folder path to the nav images. Usually its only just that..

  3. Hi!
    Great scripts!! Great job!
    Tried Script #5 (d5.html). Works fine :-)
    Is it possible to have vertical scrolling too ?
    Thanks in advance for your reply.

  4. Hi,
    Thanks for the great work, just one problem, I want to save my page to send to someone for demo purpose but after saving the web page the carousel doesn’t works, it just stops at any random place e.g. in transition phase between two images, or when the left and right buttons are appearing. Please any guess what needs to be changed the local version saved ?
    Regards,
    Haris

  5. Hi i was curious if the thumbnails could be moved to be on the left or right of the slide show? and if it is possible to turn on and off the looping of slides.
    Thank you

  6. Hello,

    First off, thanks for posting this. This is a wonderful program. I especially like the one located at http://www.catchmyfame.com/jquery/infinitecarousel3/demo/d1-custom.html.

    That having been said, I tested it in Firefox, Chrome, Ipad, and Internet Explorer. It looks good in all browsers except Internet Explorer. In IE 9, “ic_thumbnails” creates a bar that spreads across the entire carousel. When I look at the one you have in the example on the link I posted above, it appears to work fine in IE 9. I wish to have “ic_thumbnails” to appear rounded and centered as it does in all other browser.

    Below is a link to my version of your program. Could you please take a look at my code and help me figure out what I did wrong? It would be much appreciated. Thank you.

    http://www.naa.org/api/transformation-tour-slide/index-internet-2.html

    1. I had a chance to test this in Internet Explorer 8 this weekend and it works in this browser too. It seems as if my problem exists only in IE 9.

      I will continue to research and post anything else that I find.

    2. I think I may have found the solution to my problem.

      After finding out that it is working in IE 8, I figured that it may be a problem with my browser itself instead of the program. I opened my “Tools” menu in IE 9 and unchecked “Compatibility View”. Doing this adjusted the view of the carousel to look as it does in every other browser.

      Thanks for allowing me to be able to post my issue here so that I have a record of what happened and how it was resolved.

  7. I need the carousel to stop/rewind the video when switching between the YouTube videos. Is that possible with your plugin?

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

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

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

    1. Hi sorry about my recent post,I disabled the enableKeyboardNav: true to false, because i have login and if my user have user like sussan it happend the fast thing.
      thanks

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

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

Comments are closed.

A web developer's journal