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