Slide Count

Hi, yes it should be possible. Take a look here: https://www.metaslider.com/documentation/developers/

Look at the “metaslider_{type}_slider_parameters” section.

You’ll want something like this in your functions file:

function metaslider_nivo_params($options, $slider_id) {
    $options['afterChange'][] = "current_slide_no = jQuery('#metaslider_ID_GOES_HERE').data('nivo:vars').currentSlide;";
    $options['afterChange'][] = "jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $options;
}
add_filter('metaslider_nivo_slider_parameters', 'metaslider_nivo_params', 10, 2);

That’ll add the ‘afterChange’ parameter to the JS – get that working first.

Then you want to use the (currently-undocumented-but-will-add-soon) “metaslider_nivo_slider_javascript” filter to add the remaining JS beneath the call to nivoSlider,

function metaslider_nivo_js($javascript, $slider_id) {
  $javascript .= "jQuery('#nivo-slider-status').show();
        jQuery('#nivo-slider-status > .total-slides').html(total);
        current_slide_no = jQuery('#metaslider_ID_GOES_HERE').data('nivo:vars').currentSlide;
        jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $javascript;
}
add_filter('metaslider_nivo_slider_javascript', 'metaslider_nivo_js', 10, 2);

Totally untested… but should get you on your way ??

Edit: added a couple of fixes

Regards,
Tom.

There seemed to be some missing semi-colons in the first bit of code. I added them like so…

function metaslider_nivo_params($options, $slider_id) {
    $options['afterChange'][] = "current_slide_no = jQuery('#nivo-slider').data('nivo:vars').currentSlide;";
    $options['afterChange'][] = "jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $options;
}
add_filter('metaslider_nivo_slider_parameters', 'metaslider_nivo_params', 10, 2);

Still not completely working. All the code seems to be getting added properly, but the slide numbers are not populating. The console says that total is not defined:

Uncaught ReferenceError: total is not defined https://www.jaisatya.com:102
metaslider_53 https://www.jaisatya.com:102
timer_metaslider_53

Searched for nivo api, but could not find. So close…

Hi,

Yep, very close.

Try this code.

function metaslider_nivo_params($options, $slider_id) {
    $options['afterChange'][] = "current_slide_no = jQuery('#metaslider_{$slider_id}').data('nivo:vars').currentSlide;";
    $options['afterChange'][] = "jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $options;
}
add_filter('metaslider_nivo_slider_parameters', 'metaslider_nivo_params', 10, 2);

function metaslider_nivo_js($javascript, $slider_id) {
    $javascript .= "jQuery('#nivo-slider-status').show();
        var total = "5"; // temporary
        jQuery('#nivo-slider-status > .total-slides').html(total);
        current_slide_no = jQuery('#metaslider_{$slider_id}').data('nivo:vars').currentSlide;
        jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $javascript;
}
add_filter('metaslider_nivo_slider_javascript', 'metaslider_nivo_js', 10, 2);

“total” is hard coded to 5, so you’ll need to work that bit out, I suspect “jQuery(‘#metaslider_{$slider_id}’).data(‘nivo:vars’).total;” might do it.

Good luck!

Regards,
Tom

It is working!

Here is the final code:

function metaslider_nivo_params($options, $slider_id) {
    $options['afterChange'][] = "current_slide_no = jQuery('#metaslider_{$slider_id}').data('nivo:vars').currentSlide;";
    $options['afterChange'][] = "jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $options;
}
add_filter('metaslider_nivo_slider_parameters', 'metaslider_nivo_params', 10, 2);

function metaslider_nivo_js($javascript, $slider_id) {
  $javascript .= "jQuery('#nivo-slider-status').show();
        var total = jQuery('#metaslider_{$slider_id}').data('nivo:vars').totalSlides;
        jQuery('#nivo-slider-status > .total-slides').html(total);
        var current_slide_no = jQuery('#metaslider_{$slider_id}').data('nivo:vars').currentSlide;
        jQuery('#nivo-slider-status > .current-slide').html(current_slide_no+1);";

    return $javascript;
}
add_filter('metaslider_nivo_slider_javascript', 'metaslider_nivo_js', 10, 2);

For anyone using this, please note that you need to add:

<div id="nivo-slider-status">
    <span class="current-slide"></span> of <span class="total-slides"></span>
</div>

somewhere in your template.

Nice ??

Good to see those actions being put to good use. They were only introduced a few days ago, reassuring to see them working “in real life”!

Regards,
Tom

Hello – I am trying to add a slide count to my slider (using the flexslider part of MetaSlider plugin.
I have tried using the same code as above replacing nivo with flex throughout. I do not know where to add the function – is it to my main functions.php file within my theme? Also where do I add the div – which template….?
Many Thanks!

Hi, yes the code should go in the functions.php file in your theme. The div goes into wherever your slider is displayed. If you’re putting it into a post or page, you could just switch to the text view of the WYSIWYG and chuck the HTML underneath the metaslider shortcode – that’s a bit of a hack though and there’s a chance you could delete it by accident.

Saying that… that code won’t work with flexslider, it uses different functions. Is there a reason you are using flexslider over nivoslider? Easiest option would be to switch to nivoslider ??

Regards,
Tom.

Ok – Have switched to nivo slider and it works – thank you….
I used the hack you suggested and added HTML under meta slider shortcode in the post content area.
I would prefer to have it in the template but can’t work out which template to put it in…..
any more help much appreciated – otherwise I can manage ok as is!