Download Slider

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

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": "http://www.hulu.com/heroes" },         { "file": "prisonbreak.jpg", "label": "Prison Break", "link": "http://www.hulu.com/prison-break" }     ] });

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 http://envato.diogoresende.net/slider/