Number Indicators (instead of dots)

ti's Avatar

ti

06 Jan, 2018 08:57 PM

Hi Dimitri,

Its is possible to change the dots indicators of carrousel to a number indicator like "2/17" ( In that case it is slider 2 of 17 sliders).
How do we get this?

Thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 06 Jan, 2018 10:04 PM

    Dmitry Semenov's Avatar

    Hello,

    It's possible, but you'll need to add some code -
    http://help.dimsemenov.com/kb/royalslider-javascript-api/creating-s...

  2. 2 Posted by ti on 08 Jan, 2018 08:16 PM

    ti's Avatar

    Hi Dmitry,

    We had some difficulties using the code above...

    1) I'm not using APi, neither had added this elements before, how do i manage to use it?

    2). Where do I need to insert this code (var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( sliderJQ ); ) . Should i use it on the rsContent ?

    3) where I need to update rsAfterSlideChange? (i mean, in which file i will locate this function?)

  3. Support Staff 3 Posted by Dmitry Semenov on 09 Jan, 2018 06:48 AM

    Dmitry Semenov's Avatar

    Here is an example on JSFiddle http://jsfiddle.net/DmitrySemenov/zyv60070/ , hope it helps.

  4. 4 Posted by ti on 09 Jan, 2018 12:36 PM

    ti's Avatar

    Hi Dmitry,

    Thanks, we made it!!
    But still have an issue:

    Webpage: http://sandbox.liveclube.com.br/sao-paulo-sp/gastronomia/

    I inserted the code you provided but I need to create more than 1 carousel for each page, I found in other discussion another person with the same issue and you told to duplicate the code for each ID, and we've done it too, but just the first carousel change the number of slide.

    Follow js code:

    var sliderJQ = $('#slider1').royalSlider({
    addActiveClass: false,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    arrowsNavHideOnTouch: false,
    slidesSpacing: 2,
    imageScalePadding: 0,
    imageScaleMode:'fit-if-smaller',
    imageAlignCenter: true,
    transitionSpeed: 400,
    numImagesToPreload:4,
    usePreloader: true,
    sliderDrag: true,
    sliderTouch: true,
    navigateByClick: false,
    controlNavigation: 'bullets',
    loopRewind: false,
    loop: false,
    fadeinLoadedSlide: false,
    globalCaption: false,
    globalCaptionInside: false,
    
    visibleNearby: {
        enabled: true,
        centerArea: 0.25,
        center: false,
        breakpoint: 650,
        breakpointCenterArea: 0.95,
        navigateByCenterClick: false
    }
    });
    var sliderInstance = sliderJQ.data('royalSlider');
    var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( sliderJQ );
    
    function updCount() {
      slideCountEl.html( (sliderInstance.currSlideId+1) + '/' + sliderInstance.numSlides );
    }
    sliderInstance.ev.on('rsAfterSlideChange', updCount);
    updCount();
    
    var sliderJQ = $('#slider2').royalSlider({
    addActiveClass: false,
    arrowsNav: true,
    arrowsNavAutoHide: false,
    arrowsNavHideOnTouch: false,
    slidesSpacing: 2,
    imageScalePadding: 0,
    imageScaleMode:'fit-if-smaller',
    imageAlignCenter: true,
    transitionSpeed: 400,
    numImagesToPreload:4,
    usePreloader: true,
    sliderDrag: true,
    sliderTouch: true,
    navigateByClick: false,
    controlNavigation: 'bullets',
    loopRewind: false,
    loop: false,
    fadeinLoadedSlide: false,
    globalCaption: false,
    globalCaptionInside: false,
    
    visibleNearby: {
        enabled: true,
        centerArea: 0.25,
        center: false,
        breakpoint: 650,
        breakpointCenterArea: 0.95,
        navigateByCenterClick: false
    }
    });
    var sliderInstance = sliderJQ.data('royalSlider');
    var slideCountEl = $('<div class="rsSlideCount"></div>').appendTo( sliderJQ );
    
    function updCount() {
       slideCountEl.html( (sliderInstance.currSlideId+1) + '/' + sliderInstance.numSlides );
    }
    sliderInstance.ev.on('rsAfterSlideChange', updCount);
    updCount();
    

    I've tried to change the function name of the slideCount but all attempts were failed.

    Could you please check what is wrong in this code?

    Thanks million

  5. Support Staff 5 Posted by Dmitry Semenov on 09 Jan, 2018 01:58 PM

    Dmitry Semenov's Avatar

    Here is example with multiple http://jsfiddle.net/DmitrySemenov/zyv60070/

  6. ti closed this discussion on 10 Jan, 2018 11:22 AM.

Comments are currently closed for this discussion. You can start a new one.

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