JS Tutorial
Download
- Overview
- Documents
- Demos
User Rating: 5/5 ( 2 votes)
Your Rating:
Radiant Scroller is a jQuery plugin that allows to create responsive scrollers (carousels) with grid and simple horizontal layouts. RadiantScroller can be cuztomized with the variety of options and some API methods are also available.
Requirements
- jQuery 1.7.0+
- MouseWheel plugin (only if you want to provide mousewheel support)
Source: radiant-wind.com
1. INCLUDE JS AND CSS FILES
<script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery-1.11.1.min.js"></script> <script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.mousewheel.min.js"></script> <script src="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.radiant_scroller.min.js"></script> <link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/radiantwind/radiant_scroller/script/jquery.radiant_scroller.css" media="all">
2. HTML
<div id="your_scroller_id">
<div class="scroller-el"><img src="image1.jpg" alt="Image1" /></div>
<div class="scroller-el"><img src="image2.jpg" alt="Image2" /></div>
<div class="scroller-el"><img src="image3.jpg" alt="Image3" /></div>
</div>
The scroller-el class is required.
3. CSS
.radiant_scroller .scroller-el {
width: 200px;
height: 200px;
margin-right: 10px;
margin-bottom: 10px; /* This is optional but recommended - otherwise your images will have no horizontal spacing */
}
4. JAVASCRIPT
$(document).ready(function() {
$('#myScroller').radiantScroller({
elementWidth: 200,
elementMargin: 10,
cols: 3,
rows: 3
});
});
5. OPTIONS
| Property | Default | Description |
|---|---|---|
| animateDuration | 700 | Integer Animation duration for the scrolling. The value is specified in milliseconds. |
| addPagination | false | Boolean Whether the scroller should have pagination (often displayed as small navigational dots) enabled. |
| cols | 2 | Integer How many (maximum) columns should the scroller have - basically this means how many elements will be visible at once horizontally (but if the scroller's width changes this value will also change). |
| easingType | "swing" | String Easing type for the scrolling. You can specify any other type of easing but bear in mind that jQuery has only swing and linear easings included. You will have to include jQueryUI's effects and easings plugin to get more. |
| elementMargin | 10 | Integer Horizontal (left/right) margin for the scroller's elements. This value should correspond to the value that is provided in the styles. |
| elementWidth | 200 | Integer Width for the scroller's elements. This value should correspond to the value that is provided in the styles. |
| nextButtonText | "" | String Text to be shown on the "next" button. |
| prevButtonText | "" | String Text to be shown on the "previous" button. |
| rows | 2 | Integer How many rows should the scroller have. |
| useMouseWheel | false | Boolean Whether support for the mousewheel scrolling should be enabled. Please note that when this value is set to true, you should hook up MouseWheel plugin. |
6. API
To get access to the RadiantScroller's API you should initialize your scroller like this:
var my_scroller = $('#myScroller').radiantScroller({...});
And then you can manage your scroller by calling radiantScroller on the my_scroller variable and passing it an API action to invoke. Currently there are a few API methods available:
- radiantScroller('next') - scroll one page forward.
- radiantScroller('prev') - scroll one page backward.
- radiantScroller(< number >) - scroll to a page with the specified number. Page numeration starts from 1. If a non-existent page is provided nothing happens.
- radiantScroller('by', < number >) - scroll by a specified number of pages. For example if you are at the 1st page and call my_scroller.radiantScroller('by', 2) you scroll by 2 pages and end up at the 3rd page.
