Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox
| File Size: | 354 KB |
|---|---|
| Views Total: | 70544 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Scrollbox is a lightweight plugin for jQuery that enables you to scroll a list of html elements (text, image, etc...) like a carousel slider or traditional marquee.
Features:
- Simple and lightweight
- Vertical and horizontal scroll
- Auto play
- Multiple instances on one page
- Pause on hover over
- Useful options to customize your list scrolling
- Prev / Next navigation buttons
Basic Usage:
1. Include the latest jQuery library and jQuery Scrollbox Plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.scrollbox.js"></script>
2. Create a list of images you wan to scroll
<div id="demo" class="scroll-img"> <ul> <li><a href="#" target="_blank"><img src="img/1.png"></a></li> <li><a href="#" target="_blank"><img src="img/2.png"></a></li> <li><a href="#" target="_blank"><img src="img/3.png"></a></li> </ul> </div>
3. Initialization with options
<script>
$(function () {
$('#demo').scrollbox({
direction: 'h', // vertical or horizontal
distance: 134 // the distance between items
});
});
</script>
4. All the options
<script>
$(function () {
$('#demo').scrollbox({
// Scroll method
linear: false,
// Start delay (in seconds)
startDelay: 2,
// Delay after each scroll event (in seconds)
delay: 3,
// Distance of each single step (in pixels)
step: 5,
// Delay after each single step (in milliseconds)
speed: 32,
// Items to switch after each scroll event
switchItems: 1,
direction: 'vertical',
distance: 'auto',
autoPlay: true,
onMouseOverPause: true,
paused: false,
queue: null,
listElement: 'ul',
listItemElement:'li',
// Infinite loop or not
infiniteLoop: true,
// Give a number if you don't want to have infinite loop
switchAmount: 0,
// Callback function after each forward action
afterForward: null,
// Callback function after each backward action
afterBackward: null
});
});
</script>
Change logs:
v1.4.2 (2015-11-21)
- Fix event binding arguments
v1.4.1 (2015-04-09)
- Update.
v1.2.0 (2015-01-17)
- Update.
v1.2.0 (2014-07-24)
- Update.
v1.0.5 (2014-03-19)
- Add an example for forwardHover.
v1.0.5 (2013-12-01)
- Fix choppy scrolling.
v1.0.4 (2013-11-17)
- Selector fix
This awesome jQuery plugin is developed by wmh. For more Advanced Usages, please check the demo page or visit the official website.











