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.