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.