1. Setup

• Download jQuery, and add it into the head of your document
• Download the ClickScroller package, and add jquery.clickscroller.js into the head of your document
• Optionally, grab the easing js (is included with the download package)

2. Write Some HTML

<div id="yourContainer">
	<ul>
		<li>A list item</li>
		<li>Another list item</li>
		<li>Another list item</li>
		<li>Etc...</li>
	</ul>
</div>
<a id="#clickscroll-more" href="#">More</a>
<a id="#clickscroll-less" href="#">Less</a>

3. Write some CSS

#yourContainer {
	height: 300px; /* REQUIRED FOR VERTICAL SCROLLING */
	width: 500px; /* REQUIRED FOR HORIZONTAL SCROLLING */
	overflow: hidden; /* DO NOT REMOVE */
	position: relative; /* DO NOT REMOVE */
}
#yourContainer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;	/* DO NOT REMOVE */
}
#yourContainer ul li {
	padding: 0;
	margin: 0;
}

4. Write some Javascript (well jQuery)

$(function(){
	$('#yourContainer').clickScroll();
});

4. Customize

This is how you could setup a horizontal scroller using all the options, like in the demo

$('#yourContainer-horizontal').clickScroll({
	speed: 1000, // Scroll Speed
	easing: 'easeOutElastic', // Animation easing method
	lessBtn: '#scroll-left', // Custom ID of scroll button
	moreBtn: '#scroll-right', // Custom ID of scroll button
	btnFadeSpeed: 500, // Speed of button fading in/out when not end of scrolling is reached
	horizontal: true // Make it scroll Horizontally,
	autoHideNav: false // Don't hide the navigation controls automatically
});

You’ll also want to change you CSS so the list elements are floated or inline-block…

Other Notes

• The plugin relies on an unordered list <ul> and list items <li> to be children of the container, if you use something else, it won’t work.
• When horizontally scrolling, the width of the list will be automatically calculated and applied. If you’re changing the widths of list items dynamically, you might have to get creative in the source.
• Don’t add your control links into the container.

Changelog

• “autoHideNav” option added for control over navigation controls being automatically hidden/shown.

Download

Demo

This plugin is completely cross browser, and also provides the ability to resize gracefully when the reset option is set to true. Additionally, intervals can be set by adding a class of “scroll-interval” which automatically adds dash’s to the track and provides automatic snap-to on the elements.

Examples:

• Basic Example
• Real world usage

Usage

Just include the following files in the head of your page:

• jQuery
• the dimensions plugin
• the mouse wheel plugin
• jScrollHorizontalPane.js (or the compressed)
• jScrollHorizontalPane.css

Then you can use any query selector to select the elements you would like to apply jScrollHorizontalPane to and then initialise it. The following code runs when the document is ready and finds any element with a class of “scroll-pane” and then calls jScrollHorizontalPane on them.

$(function() {
     $('.scroll-pane').jScrollHorizontalPane();
});

jScrollHorizontalPane also takes the following options as parameters to customize the functionality:

• scrollbarHeight – The height of the generated scrollbar in pixels
• scrollbarMargin – The amount of space to leave on the side of the scrollbar in pixels
• wheelSpeed – The speed the pane will scroll in response to the mouse wheel in pixels
• showArrows – Whether to display arrows for the user to scroll with
• arrowSize – The height of the arrow buttons if showArrows=true
• animateTo – Whether to animate when calling scrollTo and scrollBy
• dragMinWidth – The minimum width to allow the drag bar to be
• dragMaxWidth – The maximum width to allow the drag bar to be
• animateInterval – The interval in milliseconds to update an animating scrollHorizontalPane (default 100)
• animateStep – The amount to divide the remaining scroll distance by when animating (default 3)
• maintainPosition- Whether you want the contents of the scroll pane to maintain it’s position when you re-initialise it – so it doesn’t scroll as you add more content (default true)
• resize – Whether or not to have resizing turned on or not.
• minimumWidth – The minimum width to allow the jScrollHorizontalPane to be resized to. Only effective when resize is on.
• reset – When set to ‘true’ all the global properties will be reset. This is useful for dynamic refreshes on the page.

Downloads

You can download the zip file with the complete package from the following link. Download

Bug Reporting

Email info@threeformed.com for the time being if u encounter any bugs and hopefully we can take care of the issue!
Otherwise, enjoy!