jCarrotCell Demo: The Basics

Setup

1. Create the carrotCell markup. By default everything must be contained in the element .carrotCell, which contains a .carrotCellView that is the parent to another container with the items being its children. The controls are also assumed to be contained inside .carrotCell. The markup can be changed, please refer to the layout flexibility demo and the documentation.

<div class="carrotCell">			
	<div class="carrotCellView">
		<ol>
			<li><img src="images/cat01.png" /></li>
			<li><img src="images/cat02.png" /></li>
			<li><img src="images/cat03.png" /></li>
			<li><img src="images/cat04.png" /></li>
			<li><img src="images/cat05.png" /></li>
			<li><img src="images/cat06.png" /></li>
			<li><img src="images/cat07.png" /></li>
			<li><img src="images/cat08.png" /></li>
			<li><img src="images/cat09.png" /></li>
		</ol>       
	</div>			
	<div class="prev">prev</div>
	<div class="next">next</div> 
</div>
</code></pre>

2. Include the carrotcell.css or import the styles. This CSS contains the basic foundations needed to make carrotCell work.

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

3. Include jQuery (1.8.3) from the CDN or any versions 1.6+ up to 1.8.3.

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

4.Include the jCarrotCell.js after the jQuery script.

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

Horizontal Scroll

The default carrotCell is horizontal and advances by how many is visible in the current view port.

5.a.1 Define a fixed width for .carrotCell and/or .carrotCellView, then define a fixed width for the scrolling items. These values are used in the horizontal scroll calculations.

.carrotCell {  width: 560px; } // set the width of the over all carrotCell
.carrotCellView { width: 500px; } // set the width of the clipping pane
.carrotCellView li { width: 100px; } // set the width of each scrolling item

5.a.2 Call carrotCell() on the .carrotCell container element.

$(".carrotCell").carrotCell();

Fall Back State (No Javascript)

This is what the horizontal carousel look like without any javascript methods being called to create the carrotcell. Note that the previous, next, and all javascript related control buttons buttons are hidden by default through carrotcell.css.

Vertical Scroll

This carrotCell scrolls vertically instead of horizontally. The mark up used in the vertical carrotCell is exactly the same as the horizontal one, the only difference is changes in the CSS.

5.b.1 Create the styles to lay out the .carrotCell and children correctly.

.carrotCell { width: 180px; } // make it narrow
.carrotCell .carrotCellView { height: 260px; } // set the height of clip
.carrotCellView  li{ height: 260px; } // set the height of each element
...

5.b.2 Set the parameter sideways to be the boolean false

$('.carrotCell').carrotCell({ sideways: false });

Fall Back State (No Javascript)

This uses the overflow:auto property of the .carrotCellView container when Javascript is not available.

Advance By n Steps

By default the carrotCell scrolls the whole page of what is currently visible, but it can be changed to scroll n amount of items at once.

Set the parameter step to be whatever number, in this case it is 1.

$('.carrotCell').carrotCell({ step: 1 });

Scrolling Speed

By default the carrotCell scrolls at 500ms, the below example is scrolling at 2000ms.

Set the speed parameter to be an integer (milisec), in this example it is also set to advance by 2 items at a time.

$(".carrotCell").carrotCell({ 
	step: 2,
	speed: 2000
});