jCarrtCell

What Is It?

jCarrotCell is a jQuery carousel plugin that does all the popular carousel things.

What Makes It Different?

• No need to use the same default HTML tags that the examples use.
• Pass in custom selectors to find control elements anywhere on the page.
• Auto-generate the paging navigation.
• Insert, remove, empty, reload the carousel via AJAX or whatever and have it actually work.
• Nested scrolling.
• Swipe support on applicable devices.
• Usable fallback in case Javascript is disabled.
• Kittens, puppies in examples.

What Can It Do?

• Vertical / horizontal scrolling.
• Circular / infinite scrolling.
• Scrolling speed, scrolling delay control.
• Timed auto advance.
• Play, pause, and stop control in auto advance mode.
• Pause auto advance on hover.
• Stop on click of a navigation element.
• Navigate using custom key events.
• Clickable paging navigation or "navi".
• Exposed API methods.
• Custom Events.
• Custom class names.
• Custom selectors to find controls anywhere on the page.

Where Is It?

You can get it on github https://github.com/jyuya/jCarrotCell.

How Do I Use It? (TL,DR Version)

1. Create the mark up.

			
	

		

			
item 1
			
item 2
			
item 3
			
item 4
			
item 5
			
item 6
			
item 7
			
item 8
			
item 9
		
       
	
			
	
previous
	
next
 

2. Include the carrotcell.css.

<link type="text/css" href="css/carrotcell.css" rel="stylesheet">

3. Give the carrotCell some styling and sizes.

.carrotCell { 
	width: 400px; 
}		
.carrotCellView li {
	width: 100px;
	height: 100px;
	... // additional styles
}
.carrotCell .disabled  { 
	color: #ccc; 
}
.prev, .next {
	display: block;
}
.prev { 
	float: left; 
	margin-right: 320px;
}

4. Include jQuery (1.8.3).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

5. Include jCarrotCell.js file after jQuery.

<script src="jCarrotCell.js" type="text/javascript" charset="utf-8"></script>

6. Invoke carrotCell() on the .carrotCell on document ready.

$(function() {
    $('.carrotCell').carrotCell();
});

Optional. Enable swipe support for the carousel on touch devices (iPhone, iPad) simply by including the jquery-touchwipe.js by Andreas Waltl. This enables swipes on the carousel content to advance forward or back.

<script src="jquery-touchwipe.js" type="text/javascript" charset="utf-8"></script>

Result: A minimal carrotCell.

More Information

Credits

Based on http://jqueryfordesigners.com/jquery-infinite-carousel/