Demo 2: Zoom Slider

Zoom Effect

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

Full-Width Display

To make the slider full-width, we've removed the max-width property from ninja-slider.css:
#ninja-slider div.slider-inner { /*max-width:800px;*/ }

Custom Navigation Controls

This demo manually adds its own Previous and Next buttons, as shown below.

<div class="navsWrapper">
    <div id="ninja-slider-prev"></div>
    <div id="ninja-slider-next"></div>
</div>

When they are present, ninja-slider.js automatically skips generating its default navigation controls.

Caption Transition Effects

Configure caption transitions with the animation property:


@keyframes titleAnimation { 
    0% { opacity:0; }
    10% { opacity:0;transform: translateY(-20%);}
    20% { opacity:1;transform: translateY(0%);}
    70% {opacity:1;transform: translateY(0%);}
    80% {opacity:0;transform: translateY(100%);}
    100% {opacity:0;transform: translateY(100%);}
}
#ninja-slider li.show div.caption { 
    animation: titleAnimation 6s linear both; 
}

For more information, refer to the source code available for download in Demo 1.