Demo 9: Presentation Slideshow

Let's explore how to customize the display of the current slide number and how to modify the navigation bullets to show numbers:

Displaying the Current Slide Number

In the markup, we have included:

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

Additionally, the before event handler in ninja-slider.js is configured to show the current slide number by the div#current-slide-num:

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

Show Slide Numbers Instead of Circle Bullets in the Slider Pager

By default, the navigation bullets generated by ninja-slider.js include slide index numbers (starting from 1), but they are hidden using font-size:0;. If you want the slider pager to display slide numbers instead of bullets, update the stylesheet as shown below:

#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;
}