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() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.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();
            }

        });
    });
    </script>
    <?php
}
add_action('wp_footer', '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.

Found a mistake in the article? Know how to improve it? Please open support ticket.