how to get the total number of slides in flexslider

Question

I am using flexslider http://www.woothemes.com/flexslider/ , now I want to get the total number of the slides and the number of the sildes.

number of the slide/total number of the slides

for example if I have 5 slides and I am now in 2nd slide, so this will be the output below the slides.

2/5

if I click the "next nav" it will become

3/5

if "prev nav";

2/5

It is possible in flexslider? if yes, how to do it?

Answer 1

You can find the answer here:http://www.woothemes.com/flexslider.

    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
          animation: "slide",
          controlsContainer: ".flex-container",
          start: function(slider) {
            $('.total-slides').text(slider.count);
          },
          after: function(slider) {
            $('.current-slide').text(slider.currentSlide);
          }
       });
     });
    </script>

If you want even the first slide to be counted you can add in the start function:

$('.current-slide').text(slider.currentSlide);

If you want the current-slide to begin with number 1 (not 0) you can do:

$('.current-slide').text(slider.currentSlide+1);

Answer 2

According to this website, you can do it with the callback API. http://www.woothemes.com/flexslider/. Write a Start and After callback method when you instantiate flexslider, and pass in the slider. Then use slider.count and slider.currentSlide to get what you need. In my code below, $slider_wrap, $current_slide and $total_slides are just variables assigned to jQuery objects where I wanted to display the slider count. I did slider.currentSlide+1 because the first slide is actually 0 in the array.

$slider_wrap.flexslider({
    start: function(slider){
      $current_slide.html(slider.currentSlide+1);
      $total_slides.html(slider.count);
    },
    after: function(slider){
      $current_slide.html(slider.currentSlide+1);
      $total_slides.html(slider.count);
    }
  });

Answer 3

Base on the demo here

I notice the demo and others will generate the code like below :

<ol class="flex-control-nav flex-control-paging">
    <li><a class="">1</a>
    </li>
    <li><a class="flex-active">2</a>
    </li>
    <li><a>3</a>
    </li>
    <li><a>4</a>
    </li>
</ol>

So according this, you can get what you want using the code:

var index = $('li:has(.flex-active)').index('.flex-control-nav li')+1;
var total = $('.flex-control-nav li').length;