The easiest way to use the image slider is to download the source and demos directly from the slider main page, copy the demo's code and paste it into your page.
The source code includes: HTML (demo1-8.html), CSS (js-image-slider.css), and Javascript (js-image-slider.js).
More detailed instructions are under the Directions tab on the slider main page.
Transition Effects
Transitional effects are customizable by the effect and effectRandom options in the js-image-slider.js. For example:
var sliderOptions =
{
sliderId: "slider",
effect: "17,13,1",
effectRandom: true,
pauseTime: 2800,
transitionTime: 1200,
slices: 14,
boxes: 8,
hoverPause: 1,
autoAdvance: true,
captionOpacity: 0.4,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
m: false,
license: "mylicense"
};
- Preset custom effects can be used, such as: effect:"series1"
- A single effect is allowed. For example: effect:"13"
Navigation Bullets
Navigation bullets are created automatically by the script of the image slider.
The CSS class selector .navBulletsWrapper can be used to change the navigation bullets' positon and style.
If you don't need the Navigation Bullets, just hide them via CSS:
div.navBulletsWrapper {display:none;}