1. Robin Cafolla
  2. gallery-scroller

Overview

HTTPS SSH

Gallery Scroller Plugin

Simple horizontalscroller plugin for jquery

HTML setup

#galleryWrapper {
    float: left;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

#galleryScroller {
    width: 10000px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#galleryScroller img {
    float: left;
    width: 200px;
    height: 100px;
    background-color: red;
    margin: 0;
    padding: 0;
}

:::html
<div id='galleryWrapper'>
    <ul id='galleryScroller'>
        <img src="images/img1.jpg" />
        <img src="images/img2.jpg" />
        <img src="images/img3.jpg" />
    </ul>
</div>

Options

_Option_       _Use_                                                        _Default_
frequency      How often to scroll                                           5000    
speed          How fast to scroll                                            1000    
stopOnHover    Should we stop scrolling when you hover over the gallery      true    
direction      which direction should we scroll                              right   
rightButton    Pass a $() wrapped element to use as a button to go left      null    
leftButton     Pass a $() wrapped element to use as a button to go right     null

Use

$('#galleryScroller').scroller();

or to modify settings:

$('#galleryScroller').scroller({
    frequency: 5000,
    speed: 1000,
    stopOnHover: true,
    direction: 'right'
});

You can provide elements to use as buttons:

$('#galleryScroller').scroller({
    frequency: 5000,
    speed: 1000,
    stopOnHover: true,
    direction: 'right',
    'rightButton': {
        'element': $('#rightButton')
    },
    'leftButton': {
        'element': $('#leftButton')
    }
});

and you can over-ride any of the options for that buttons action. So for example the buttons below scroll at twice the speed of the galleryScroller:

$('#galleryScroller').scroller({
    frequency: 5000,
    speed: 1000,
    stopOnHover: true,
    direction: 'right',
    'rightButton': {
        'element': $('#rightButton'),
        'speed': 500
    },
    'leftButton': {
        'element': $('#leftButton'),
        'speed': 500
    }
});