Scroller is a plugin for jQuery that allows display images in the form of round markers
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>The article source:http://www.jscraft.net/plugins/scroller.html
