carrot cell

jCarrotCell

“You fool! Don't you realize yet you're up against the perfect carousel?!”

“Perhaps these miserable humans would appreciate a carousel.”

— carrotCell

by: Julia Yu

version: 2.0

source: https://github.com/jyuya/jCarrotCell

started: 11/10/2011

last updated: 12/19/2012

tested with jQuery version: 1.8.3

What Is It?

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

What Makes It Different?

What Can It Do?

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.


  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5
  6. item 6
  7. item 7
  8. item 8
  9. item 9

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.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9

More Information

Credits

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