CodeCanyon Slider 88807

CodeCanyon Slider 88807

CodeCanyon Slider 88807
JavaScript \ Slider
Sliding \ Banner

JavaScript - Slider 88807 by dresende @ CodeCanyon

JavaScript \ Slider

Last Update: 24 February 10; Compatible Browsers: FireFox 2, FireFox 3, IE7, IE8, Opera, Safari; JS Library: Prototype 1.6,; Files Included: CSS, HTML, JavaScript JS.

The Slider allows you to have horizontaly aligned content that does not fit on the window size you want. You can put as many items as you want. An item consists of an image, a label and a link. If you want you can override the link text to all or to just one or two items.

How to Use
After including PrototypeJS and Scriptaculous (effects+dragp&drop), include the file slider.js (object) and the file slider.css (style).
Then, just include something like this on the window load.

new Slider({
"slider": "slider-test1",
"items" : [
{ "file": "heroes.jpg", "label": "Heroes", "link": "" },
{ "file": "prisonbreak.jpg", "label": "Prison Break", "link": "" }
This code creates a slider on the element that has the ID “slider-test”. It has 2 items: Heroes and Prison Break.

Slider Options
The next list shows all the options available to the Slider.

- slider – slider parent object or ID

- itemWidth – slide width (default is 320 )

- itemHeight – slide height (default is 200 )

- path – slide images path (default is “images/” )

- linkText – slide default link text (default is “Explore” )

- animate – animate slider (default is true ). The slider will keep scrolling until you click the dragger.

- animationDelay – time between animations, in seconds (default is 5 )

- slideDelay – time of slide effect, in seconds (default is 1 )

- slideLoop – when reaching the last item, loop to the first one? (default is true )

- onClick – event called when clicking an item link (default is none )

Instead of providing a link to each item, you can set a callback function when clicking a specific item or a default callback. Notice that if
you set a default callback, it will always be called and no links will be used.

new Slider({
"slider" : "slider-test1",
"onClick": function (item) {
alert("You clicked item " + item.get("label"));
"items" : [
{ "file": "heroes.jpg", "label": "Heroes" },
{ "file": "prisonbreak.jpg", "label": "Prison Break", "onClick": function () { alert("You clicked PRISON BREAK!"); } }
In the previous code, the default callback will be called for item “Heroes” but not for “Prison Break” because
this item has a specific callback.

Check out the demo at


Keywords: banner, sliding.

Tags: Sliding, Banner, Slider

Premium CodeCanyon Slider 88807 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Slider 88807 for digital design and education. CodeCanyon Slider 88807 desigen style information or anything related.


Add Comments:
Enter Code: *