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.

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)

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

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

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(){}