Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox

File Size: 354 KB
Views Total: 70356
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Carousel & Marquee Like List Scrolling Plguin For jQuery - Scrollbox

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)

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.