Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders


— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

Slider - CodeCanyon Item for Sale


Ad: Bluehost hosting

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

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


24 February 10

Last Update:

Compatible Browsers:
Firefox, IE7, IE8, Opera, Safari

Files Included:
CSS, HTML, JavaScript JS

JS Library:
Prototype 1.6,


eCommerce, eCommerce, All Items, banner, sliding