Geek Answers Handbook

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 slides and the number of sildes.

number of the slide/total number of the slides

for example, if I have 5 slides, and now I'm on the second slide, so this will be the output under the slides.

 2/5

if I click "next nav" it will become

 3/5

if "prev nav";

 2/5

Is it possible in flexslider? if so, how to do it?

+6
source share
6 answers

The base on the demo is here

I notice a demo, while others will generate code as shown 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>

This way 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;
+3
source

Here you can find the answer: 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 to the launch function:

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

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

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

According to this site, you can do this using the callback API. http://www.woothemes.com/flexslider/ . Write a method to start and then call back when creating the flexslider instance and go to 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 number of sliders. 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); } });
+10
source

Based on the layout on this page, you can specify the number of slides:

 $(".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 .

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

I am currently doing the same thing to create a slide index (... although I use 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); } });
0
source

Get the slider and then use count:

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

0
source

More articles:


All Articles