Skip to main content

Creating slider index indicator - "Slide 1 of 10"

1) Initialize slider as usual:

    var sliderJQ = $('#your-slider-id').royalSlider({
        // options...
    });
    var sliderInstance = sliderJQ.data('royalSlider');

2) Create an element and add it to container that you need (in this example directly inside slider div).

    var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( sliderJQ );

3) Listen for rsAfterSlideChange event and update text in element that you added.

    function updCount() {
        slideCountEl.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
    }
    sliderInstance.ev.on('rsAfterSlideChange', updCount);
    updCount();

Also you probably need to style this rsSlideCount element to fit your requirements.

Example on JSFiddle http://jsfiddle.net/DmitrySemenov/zyv60070/

If you're using WordPress plugin​

Add the code in functions.php:

function add_royalslider_index_indicator() {
    ?>
        $('.royalSlider').each(function() {
            var slider = $(this);
            var sliderInstance = slider.data('royalSlider');

            if(sliderInstance) {
                var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider );

                var updCount = function () {
                    slideCounter.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
                }
                sliderInstance.ev.on('rsAfterSlideChange', updCount);
                updCount();
            }

        });
    <?php
}
add_action('new_rs_after_js_init_code', 'add_royalslider_index_indicator', 100);

It'll add element .rsSlideCount to the root element of slider, you may move and style it however you wish via CSS, for example:

.rsSlideCount {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 20px;
  color: #fff;
  background: #000;
}