Search

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

  • Works iPhone, iPad, Android, PC
  • Image, HTML and Text Content
  • Decide How much to scroll
  • Keyboard, Mouse and Touch input accepted
  • Use CSS
  • Callback API
feature

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

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

Download the files listed bellow.
Support

For any kind of support for this script please write an email to me support@rudrasofttech.com.

Green Flower Pot
flower
Let's Start A Project

Get a latest creative news from rudrasofttech about art, design and pop - culture.

Request Quote