jQuery images Scroller effect

Home Slideshow & ScrollerjQuery images Scroller effect

jQuery images Scroller effect

12 years ago Views

36957

7301

jscraft

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

Tag: image scroller