Zoom Slider - A JavaScript Slideshow

Zoom effect

Set by the transitionType option in the ninja-slider.js:
var nsOptions = { transitionType: "zoom" }

100% full-width

Set by removing the max-width in the ninja-slider.css, e.g.
#ninja-slider div.slider-inner { max-width:800px; }

Adding nav controls manually

By default the arrow buttons and nav dots will be added automatically by the ninja-slider.js.

In this demo we have added them manually into a wrapper so that we can customize their styles easier. For details please refer to the source code of demo2.html and its stylesheet in the download package.

Transitional effect for captions

The transitional effect of the captions is configured by the animation property and the titleAnimation rule in the stylesheet:

More Info

• Full documentation: Ninja Slider
• Questions & Answers: Posts in the forum