Creating slider index indicator - "Slide 1 of 10"

david.reiner's Avatar

david.reiner

04 Feb, 2016 10:41 AM

Hi,

one suggestion: maybe add this to the knowledge base article "Creating slider index indicator - "Slide 1 of 10""
This code snippet can be used to add a slide index indicator to each slider on the page given that they all share the .royalSlider class.

$('.royalSlider').each(function() {
        var sliderInstance = $(this).data('royalSlider'); 
        var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( $(this) );
        function updCount() {
                    slideCountEl.html( (sliderInstance.currSlideId+1) + ' of ' + sliderInstance.numSlides );
                    }
                    sliderInstance.ev.on('rsAfterSlideChange', updCount);
                    updCount();
});

Cheers,
David

  1. Support Staff 1 Posted by Dmitry Semenov on 04 Feb, 2016 05:45 PM

    Dmitry Semenov's Avatar

    Thanks a lot for sharing the solution!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac