Slide Count

[markgenest]

Is there any way to include a function to add a slide counter? I've tried the below code, but does not seem to work.

// Instantiate SliderPro
$(document).ready(function($) {
  $('.slider-pro').sliderPro({
    width: '100%',
    autoHeight: true,
    arrows: true,
    fadeArrows: false,
    buttons: false,
    fade: true,
    thumbnailPosition: 'center',
    thumbnailWidth: 75,
    thumbnailHeight: 75,
    thumbnailPointer: false,
    autoplay: false
  });
});

var slider = jQuery( this ).data( 'sliderPro' );
 jQuery(this).append('<div class="counter"><span class="active">'+(parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');
 slider.on( 'gotoSlide', function( event ) {
     jQuery(this).find('.counter .active').text(event.index + 1);
 });

I get the console error:

TypeError: slider is undefined, can't access property "getSelectedSlide" of it

What I essentially want is to just count the number of slides total and switch the counter number depending on what slide it is on (eg. 2/7).

I am not much of a jquery guy, so any help on this would be greatly appreciated!

Thanks! Mark

[markgenest]

What if you are running multiple sliders on a single page using .slider-pro? Is there any way to count the slides in each slider independently?

[davidghi]

Hi Mark,

The code for the counter needs to be placed inside the ready handler:

$(document).ready(function($) {
    $('.slider-pro').sliderPro({
        ...
    });

    var slider = jQuery( this ).data( 'sliderPro' );

    jQuery(this).append('<div class="counter"><span class="active">'+(parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');
    slider.on( 'gotoSlide', function( event ) {
         jQuery(this).find('.counter .active').text(event.index + 1);
    });
});

If you have multiple slider instances, you modify the code above like this:

$(document).ready(function($) {
    $('.slider-pro').sliderPro({
        ...
    });

    $.each( '.slider-pro', function(){
        var slider = $( this ).data( 'sliderPro' );

        $(this).append('<div class="counter"><span class="active">'+(parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');
        slider.on( 'gotoSlide', function( event ) {
             $(this).find('.counter .active').text(event.index + 1);
        });
    });
});

Cheers!

[markgenest]

Hi David,

Thanks for the response, but unfortunately it did not work. In order to get it working for ONE slider only, I had to switch (this) to ('.slider-pro), like this:

$(document).ready(function($) {

  $('.slider-pro').sliderPro({
    width: '100%',
    arrows: true,
    fadeArrows: false,
    buttons: false,
    fade: true,
    fadeDuration: 200,
    thumbnailPosition: 'bottom',
    thumbnailWidth: 75,
    thumbnailHeight: 75,
    autoplay: false,
    fullScreen: false,
    breakpoints: {
      480: {
        thumbnailWidth: 40,
        thumbnailHeight: 40
      }
    }
  });

  var slider = $('.slider-pro').data('sliderPro');

  $('.slider-pro').append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) +
    '</span>/' + slider.getTotalSlides() + '</div>');

  slider.on('gotoSlide', function(event) {
    $('.slider-pro').find('.counter .active').text(event.index + 1);
  });

});

However, this only works to accurately count the first slider instantiated while just duplicating and freezing that value for all the others.

I then wrap it in the $.each function and it breaks entirely and won't show anything.

$(document).ready(function($) {

  $('.slider-pro').sliderPro({
    width: '100%',
    arrows: true,
    fadeArrows: false,
    buttons: false,
    fade: true,
    fadeDuration: 200,
    thumbnailPosition: 'bottom',
    thumbnailWidth: 75,
    thumbnailHeight: 75,
    autoplay: false,
    fullScreen: false,
    breakpoints: {
      480: {
        thumbnailWidth: 40,
        thumbnailHeight: 40
      }
    }
  });

   $.each('.slider-pro', function() {

      var slider = $('.slider-pro').data('sliderPro');

      $('.slider-pro').append('<div class="counter"><span class="active">' + (parseInt(slider.getSelectedSlide()) + 1) +
        '</span>/' + slider.getTotalSlides() + '</div>');

      slider.on('gotoSlide', function(event) {
      $('.slider-pro').find('.counter .active').text(event.index + 1);
      });

   });

});

I then get a console error:

TypeError: cannot use 'in' operator to search for 'length' in '.slider-pro' Am using jquery-2.1.4.min.js

Not sure what I could be doing wrong. Any suggestions?

Thanks so much!

[davidghi]

Hi Mark,

The code needs a small edit: instead of $.each('.slider-pro', function(){}) it needs to be $('.slider-pro').each(function(){}):

$( '.slider-pro' ).each( function(){
    var slider = $( this ).data( 'sliderPro' );

    $(this).append('<div class="counter"><span class="active">'+(parseInt(slider.getSelectedSlide()) + 1) +'</span>/'+slider.getTotalSlides()+'</div>');

    slider.on( 'gotoSlide', function( event ) {
        $(this).find('.counter .active').text(event.index + 1);
    });
});

You will need to use this instead of slider-pro, as you see in the code above.

Cheers!

[markgenest]

That seemed to do the trick.

Thanks so much!

[davidghi]

You're welcome!

[pokolokatepetl]

Any ideas as why the var slider = $( this ).data( 'sliderPro' ); is not working for me at all, says undefined. And yes, I have put it in document ready function...