CODEWITHSUNDEEP
javascriptjqueryflexslider
gadss
gadss

Reputation: 22489

how to get the total number of slides in flexslider

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?

Upvotes: 7

Views: 18742

Answers (6)

kalifa17
kalifa17

Reputation: 137

Get the slider and then use count:

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

Upvotes: 0

Leissa
Leissa

Reputation: 119

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

Upvotes: 11

Ed Williams
Ed Williams

Reputation: 2497

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

Upvotes: 0

Kyle
Kyle

Reputation: 101

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

Upvotes: 10

pktangyue
pktangyue

Reputation: 8524

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;

Upvotes: 4

ericponto
ericponto

Reputation: 736

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

Upvotes: 1

Related Questions