The mouseGallerySlide plugin scrolls a list of items based on the position of the mouse cursor over the container. Hover toward the left edge to scroll left; hover toward the right edge to scroll right. The speed of scrolling increases as you move the cursor closer to the edge. This pattern is very useful for image galleries and horizontal navigation menus where you want to expose more items than fit on screen without requiring the user to click explicit arrows.
Basic Usage
Attach the plugin to any <ul> or <ol> that contains the items you want to scroll:
$(document).ready(function() {
$('#gallery-list').mouseGallerySlide({
speed: 8,
sensitivity: 50,
direction: 'horizontal'
});
});HTML Structure
Wrap the list in a fixed-width container so it clips overflow. The list itself should be wide enough to hold all items side by side:
<div id="gallery-wrap">
<ul id="gallery-list">
<li><img src="img1.jpg" /></li>
<li><img src="img2.jpg" /></li>
<li><img src="img3.jpg" /></li>
<li><img src="img4.jpg" /></li>
<li><img src="img5.jpg" /></li>
</ul>
</div>Parameters
- speed — Scroll speed in pixels per animation frame. Higher values scroll faster. Default:
8. - sensitivity — Width in pixels of the dead zone in the center of the container where no scrolling occurs. Increase this value to require the cursor to be closer to the edge before scrolling starts. Default:
50. - direction — Either
'horizontal'or'vertical'. Use'vertical'for tall lists that scroll up and down on mouse position. Default:'horizontal'.
How It Works
The plugin binds to the mousemove event on the container element. On each event it calculates the cursor position relative to the container center. If the cursor is within the sensitivity dead zone, scrolling stops. Outside the dead zone, it sets an interval that shifts the list's scrollLeft (or scrollTop for vertical mode) by the configured speed value each frame. The interval is cleared when the mouse leaves the container.
This approach is smooth because it uses setInterval rather than animating on every individual mousemove event, which would be far too frequent and cause performance issues.
Demo
See the plugin in action: Live demo — mouseGallerySlide.