Responsive Image Slider that adapts to the height of the window

Visit Ninja Slider to download this demo or purchase license.

Make Ninja Slider responsive on height

Set by the aspectRatio option in the ninja-slider.js:
var nsOptions = { ...... aspectRatio: "?:100%", ...... }

Another example: "?:80%" will make the slider take 80% of the viewport height.

Slide Vertically (optional)

This slider has set the transitionType to "slide vertical". This is optional. You can set it to any other type such as "fade", "slide", "zoom", ...etc.

Hide the navigation buttons/arrows when on mobile phones

The nav buttons/arrows might not be required on mobile phones because users can touch or swipe the phone to switch to other slides.

This can be easily implemented by the following CSS configuration: @media only screen and (max-width:500px){ #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pager { display:none; } }

More Info

▲