Friday, August 23, 2019
Home > javascript > Slider


Value: four$
Ranking: three.87

The Slider means that you can have horizontaly aligned content material that doesn’t have compatibility at the window dimension you wish to have. You’ll be able to put as many pieces as you wish to have. An merchandise is composed of a picture, a label and a hyperlink. If you wish to have you’ll override the hyperlink textual content to all or to only one or two pieces.

Easy methods to Use

After together with PrototypeJS and Scriptaculous (results+dragp&drop), come with the document slider.js (object) and the document slider.css (taste).

Then, simply come with one thing like this at the window load:

new Slider();

This code creates a slider at the part that has the ID “slider-test”. It has 2 pieces: Heroes and Jail Destroy.

Slider Choices

The following record presentations the entire choices to be had to the Slider.

  • slider – slider mum or dad object or ID
  • itemWidth – slide width (default is 320)
  • itemHeight – slide peak (default is 200)
  • trail – slide photographs trail (default is “photographs/”)
  • linkText – slide default hyperlink textual content (default is “Discover”)
  • animate – animate slider (default is true). The slider will stay scrolling till you click on the dragger.
  • animationDelay – time between animations, in seconds (default is five)
  • slideDelay – time of slide impact, in seconds (default is 1)
  • slideLoop – when attaining the very last thing, loop to the primary one? (default is true)
  • onClick – tournament referred to as when clicking an merchandise hyperlink (default is none)

As a substitute of offering a hyperlink to every merchandise, you’ll set a callback serve as when clicking a selected merchandise or a default callback. Understand that if
you put a default callback, it’ll all the time be referred to as and no hyperlinks will probably be used.

new Slider();

Within the earlier code, the default callback will probably be referred to as for merchandise “Heroes” however now not for “Jail Destroy” as a result of
this merchandise has a selected callback.

Take a look at the demo at http://envato.diogoresende.web/slider/

Purchase Now