come ottenere il numero totale di diapositive in flexslider

Question

Sto usando flexslider http://www.woothemes.com/flexslider/, ora voglio ottenere il numero totale di diapositive e il numero di sildes.

number of the slide/total number of the slides 

per esempio se ho 5 scivoli e sono ora in seconda diapositiva, quindi questo sarà l'uscita di sotto delle diapositive.

2/5 

se scatto il "prossimo nav" diventerà

3/5 

se "prev nav";

2/5 

È possibile in flexslider? se sì, come si fa?

Answer 1

Base sul demo here

ho notato la demo e altri genererà il codice come qui di seguito:

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

Quindi, secondo questo, è possibile ottenere ciò che si desidera utilizzare il codice:

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

Answer 2

Sulla base del markup in quella pagina si collega è possibile ottenere il numero di diapositive in questo modo:

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

E si può trovare il numero della diapositiva attiva con:

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

E se vuoi cambiare qualcosa quando cambia il cursore, puoi aggiungere qualcosa al callback after.

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

Answer 3

Secondo questo sito Web, è possibile farlo con il ca llback API. http://www.woothemes.com/flexslider/. Scrivi un metodo Start e After callback quando installi il flexslider e passi nel cursore. Quindi usa slider.count e slider.currentSlide per ottenere ciò che ti serve. Nel mio codice qui sotto, $ slider_wrap, $ current_slide e $ total_slides sono solo variabili assegnate agli oggetti jQuery in cui ho voluto visualizzare il conteggio del cursore. Ho fatto slider.currentSlide + 1 perché la prima diapositiva è effettivamente 0 nella matrice.

$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 4

Attualmente sto facendo esattamente la stessa cosa per generare l'indice di scorrimento (... anche se sto usando il PHP per generare un numero intero per il numero di immagini)

provare a creare un elemento di l'indice slide ...

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

... e utilizzare la dopo: funzione ...

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

Answer 5

Puoi trovare la risposta qui: 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> 

Se si desidera anche la prima diapositiva da contare è possibile aggiungere nella funzione di avvio:

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

Se si desidera che la corrente-scivolo per cominciare con il numero 1 (non 0) è possibile fanno:

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

Answer 6

Prendi il cursore e quindi utilizzare conteggio:

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