Presentation Slideshow

Ninja Slider can be used as Presentation Slideshow template for web pages.

The presentation slideshow is responsive and touch device friendly. You can use any HTML content for each slide including videos and audios.

You can also press the keyboard arrow keys to scroll the slideshow.

Visit Ninja Slider to download this demo or purchase license.

We've made the following configurations:

Display the current slide number

In the markup we have added:

<div id="current-slide-num"></div>

And, the before event handler in ninja-slider.js has been configured to display the current slide number at the top right corner of the slider:

var nsOptions =
{
    ......
    before: function (currentIdx, nextIdx, manual) {
        var numDiv = document.getElementById("current-slide-num");
        numDiv.innerHTML = nextIdx + 1 + " / " + nslider.getSlides().length;
    },
    ......
};

Set the slider pager to display slide numbers rather than the circle bullets

Now the nav controls are using icon images. If you prefer the slider pager to show the slide numbers, you can update the stylesheet as follows:

#ninja-slider-pager a {
    font-size:0; /* remove */
    background:transparent url(../img/9/icons.png) no-repeat 0 0; /* remove */
    /* and add: */
    font: bold 14px/14px arial;
    color: #999;
}

#ninja-slider-pager a.active {
    background-position:0 -14px;
    color: red;
}

Audio Config

We've set loop attribute to the audio element to replay the audio in the 7th slide.

We've also added the following script to turn down the starting volume of the audio:

<script>
    if (window.addEventListener)
        window.addEventListener('load', 
            function () { document.getElementById("sound").volume = 0.1; }, false);
</script>