jQuery Scrolling Carousel v2.0

The Scrolling Carousel plugin creates a carousel whose content scrolls according to the position of the mouse cursor over the carousel element, rather than relying on buttons to scroll the content. Moving the cursor further to the left causes the content to scroll faster to the right and vice versa, or up and down for the horizontally scrolling version.

OK, I've finally had the time to implement the next version. Many thanks to all those who sent suggestions and positive feedback.

New for version 2.0:

  • Added: Autoscrolling functionality
  • Added: Vertical scrolling
  • Added: "beforeCreate," "afterCreate" functions in the options list.
  • Methods have been replaced with exposed functions.

Example of a basic scrolling carousel implementation:

Vertical carousel (with autoscrolling on):

This guide assumes you already have a working knowledge of HTML, CSS and at least a basic familiarity with Javascript and jQuery

Include the relevant files in your document

Get jQuery here

Get the Scrolling Carousel JS file: Minified version, Un-minified version

Save these files in the relevant folder in your site directory ( /js/ is assumed for this example) and include them in your HTML - making sure to include the jQuery file first:

<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="/js/scrollingcarousel.2.0.min.js"></script>
							

The HTML

This is the HTML for the basic horizontal carousel on this page which displays six numbered items in an unordered list:

						
<div id="carousel-demo1" class="carousel-demo">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</div>

							

The HTML for the vertical carousel. It is identical to the horizontal one, apart from the unique id and the "carousel-demo-vertical" class selector:

	
<div id="carousel-demo2" class="carousel-demo carousel-demo-vertical">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</div>

							

An ordered list can also be used or alternatively the items in the carousel can consist of div elements:

<div id="carousel-demo1">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
								

The CSS

Assuming the carousel is using a list...

Note: Most of this CSS is just cosmetic, but it is necessary for the carousel items to have widths assigned to them in order for the carousel to work properly. Also the container for a vertical carousel should have a set height. If it doesn't, then it will attempt to take the height from its parent element.

	
.carousel-demo {
	width:560px;
}
.carousel-demo-vertical {
	height:260px;
	width:135px;
}
.carousel-demo li {
	background:#ccc;
	border:1px solid #fff;
	color:#666; 
	float:left;
	font-weight:bold;
	font-size:3em;
	height:65px;
	list-style:none;
	padding:20px 0 0 0;
	margin:0 10px 0 0;
	text-align:center;
	width:130px;
}
.carousel-demo-vertical li {
	margin:0 0 10px 0;
}
							

The jQuery

Finally activate the carousels on document load:

<script type="text/javascript">
	$(document).ready(function() {
		$('#carousel-demo1').scrollingCarousel();
		
		$('#carousel-demo2').scrollingCarousel( {
			scrollerAlignment : 'vertical',
			autoScroll: true
		});
	});
</script>
							

See the Options & API reference section for a full list of carousel options and methods.

Options

Option Key Default Description
autoScroll false Boolean - If set to 'true' the scroller will scroll automatically at set speed in a set direction when the mouse cursor is not over it.
autoScrollDirection 'left'/'down' String representing the direction in which the scroller should autoscroll (if autoscroll is on). Can be 'left,' 'right,' 'up,' or 'down' - the latter two apply to the vertical scroller.
autoScrollSpeed 10000 Integer representing the approximate time, in milliseconds, it takes for each pixel to scroll from one end of the scroller to the other while the scroller is autoscrolling. A setting of 10000 (the default) means that one pixel will scroll from one end of the scroller element to the other in approximately 10 seconds, thus the higher the number, the slower the speed. Obviously the speed will vary according to the width of the scroller element so some experimentation may be required.
looped true Boolean - If set to 'false' the content will stop scrolling when its edge reaches the edge of the container, otherwise it will loop infinitely.
scrollerAlignment 'horizontal' String - Set to 'vertical' to create a vertically aligned scroller, which scrolls up and down according to the vertical position of the mouse cursor over it.
scrollerOffset 0 Integer representing the amount the scroller content should be offset in percent when the scroller first loads. A value of '0' will align the left-most element of the scroller content to the left of the container, a value of '100' will align the right-most element to the right.
scrollSpeed 'medium' String representing the relative speed at which the content will scroll when the user mouses over it. Can be 'slow', 'medium' or 'fast'.
beforeCreateFunction null A function to call before the scroller functionality is executed.
afterCreateFunction null A function to call after the scroller functionality has been executed.

Exposed functions

To use these, an instance of the scroller needs to be stored in a variable.

Example:

var myCarousel = $('#my-carousel-container').scrollingCarousel();
		
$('#my-carousel-button').click(function() {
	myCarousel.Pause();
});
Function Description
Destroy(reInit) Removes the Scrolling Carousel functionality and returns the carousel element to its previous state.
reInit: An optional flag to pass in case you don't want to remove everything
Update(options) Updates the Scrolling Carousel.
options: The options to pass into the updated carousel instance
Pause() Stops the carousel from scrolling until the 'play' function is activated.
Play() Re-enables the scrolling action on the carousel after the 'pause' function has been activated (also re-starts autoscrolling if it is turned on).