jCarrotCell Demo: Infinite and Auto Scrolling

Demo: Infinite and Auto Scrolling Index

  1. Infinite Scroll
  2. Auto Scroll
  3. Auto Scroll Controls

Infinite Scroll

Below the carrotCell is set to infinite scroll. Note the slides with a yellow border around it are the cloned elements at the beginning and end, they are replaced by the gray bordered items once they come into full view.

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

Set infinite to the boolean true and carrotCell will scroll infinitely in both directions.


$('#infiniteKitten').carrotCell({ infinite: true });

Auto Scroll

In many instances it is useful to have the carrotCell auto advance on its own.

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

Set auto to the boolean true will start the auto scrolling. In the example below there are shown some other properties to configure the auto scroll including pauseOnHover which when set to the boolean true will pause the scrolling when mousing over the carrotCell. See documentation for a list of all properties.

		
$('#autoKitten').carrotCell({ 
	auto: true,
	step: 1,
	delay: 3000,
	speed: 500, 
	pauseOnHover: true
});

Auto Scroll Controls

With autoscroll, the controls pause, play and stop can be used to control the scrolling. The navi also auto advances as the carrotCell slides.

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

The default controls have the classes .play, .stop, .pause, any markup can be used to create the controls. As long as these classes exist inside .carrotCell the controls will be automatically created for autoscrolling carrotCells.


<div id="controlKitten" class="carrotCell">	
	<ol class="navi"></ol>
	<div class="carrotCellView">
		<ol> ... </ol>       
	</div>			
	<a href="#" class="prev">prev</a>
	<a href="#" class="next">next</a>				

	<button class="pause">pause</button>
	<a href="#" class="play">play</a>
	<div class="stop">stop</div>
</div>

Custom classes can also be used for the controls instead of the default, by setting pauseSelect, playSelect and stopSelect to be a string selector. To move the controls outside the .carrotCell scope, refer to the demo for previous & next which shows how to set the controlScope for all controls.

		
$('#autoKitten').carrotCell({ 
	...
	pauseSelect :  ".customPauseName",
	playSelect : ".playThis",
	stopSelect : ".customStop"
});