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?

Irritating

Answer 1

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;

Candent

Answer 2

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);

Tetramethyldiarsine

This is the best way. – Kirksey

Answer 3

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);
    }
  });

Osgood

Answer 4

Based on the markup in that page you link you can get the number of slides like this:

$(".slides").find("li").length

And you can find the number of the active slide with:

$(".slides").find("li.flex-active-slide").index() + 1;

And if you want to change something when the slider changes, you can add something to the after callback.

$(".mybox").flexslider({
  after: function() {
    // update the count
  }
});

Bamberg

$(".slides").find("li") will find too many li which is not OP wanting. – Candent

Answer 5

I am currently doing exactly the same thing to generate the slide index (...though I'm using PHP to generate an integer for the number of images)

Try creating an element for the slide index...

<p class="slideIndex"></p>

...and use the after:function...

$('.flexslider').flexslider({
    after: function(slider) {
        slider.find('.slideIndex').html(slider.currentSlide + 1);
    }
});

Shing

Answer 6

Get the slider and then use count:

$(yourslider).data('flexslider').count

Refreshment