Scroller

December 14, 2011 by Marcin Dziewulski

Introduction

Scroller is a plugin for jQuery that allows display images in the form of round markers

Demo Download Buy commercial license for $24 Read more about licensing

JavaScript

$('.scroller').scroller({
	element: 'a', // (string) HTML element
	direction: 'horizontal', // (string) available options: horizontal, vertical
	container: {
		name: 'inside', // (string) class name for the container
		easing: 'easeOutBack', // (string) set the easing of the animation, required: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
		duration: 800 // (int) set the speed of the easing animation in milliseconds
	},
	options: {
		margin: -20, // (int) set the margin for each element 
		zoom: 1.5, // (int) zoom multiplier
		easing: ['easeOutBack', 'easeOutBounce'],
		duration: [300, 500]
	},
	onclick: function(a, img){},
	onmouseover: function(a, img){},
	onmouseout: function(a, img){}
});

HTML

<div class="scroller">
	<div class="inside">
		<a href="#"><img src="assets/img1.jpg" alt="" /></a>
		<a href="#"><img src="assets/img2.jpg" alt="" /></a>
		<a href="#"><img src="assets/img3.jpg" alt="" /></a>
		<a href="#"><img src="assets/img4.jpg" alt="" /></a>
		<!-- etc. -->
	</div>
</div>