Scroller

Responsive jQuery Scroller Plugin

A beautiful photo scroller which works on iPad, iPhone, Android Phone and PC. Very easy to use and with the simplest HTML required. Scroller support vertical and horizontal content scrolling and text content as well.

Examples

Features

  1. Works iPhone, iPad, Android, PC
  2. Image, HTML and Text Content
  3. Decide How much to scroll
  4. Keyboard, Mouse and Touch input accepted
  5. Use CSS
  6. Callback API

How To Use

This script goes into head section 

<!-- Include jQuery Library -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="scroller.css" rel="Stylesheet" />
<script src="scroller.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function () {
$("#scroller1").scroller({ Direction: 'h', Step: 180 });
});
</script>

HTML Example 

<div class="pull-right">
    <i class="icon-angle-left icon-square" style="opacity: 0.5;" onclick="$('#scroller1').scroller('moveminus');">
</i>
    <i class="icon-angle-right icon-square" style="opacity: 1;" onclick="$('#scroller1').scroller('moveplus');"></i>
</div>
<div class="rst-scroller" id="scroller1" style="height: 160px; width: 100%;">
   <div class="rst-scroller-item">
       <img src="pic1.jpg" alt="" />
   </div>
   <div class="rst-scroller-item">
       <img src="pic2.jpg" alt="" />
   </div>
   <div class="rst-scroller-item">
       <img src="pic3.jpg" alt="" />
   </div>
   <div class="rst-scroller-item">
       <img src="pic4.jpg" alt="" />
   </div>
</div>

Usage Options

Default function

Option Default Description
Direction 'h' 'v' | 'h'

h stands for horizontal and v stands for vertical

ItemSelector .rst-scroller-item

jQuery item selector. Only children of target element will be searched.

Step 50 Integer

Amount of scroll.

OnInit null function() {}

callback on initialization

OnInitComplete null function() {}

callback on initialization complete

OnMove null function(direction) {}

callback on scroll. Possible values for direction are 'l' | 'r' | 'u' | 'd'

Download Scroller Files

  1. scroller.css
  2. scroller.js