2013-02-01 20 views
6

Ben flexslider http://www.woothemes.com/flexslider/ kullanıyorum, şimdi toplam slayt sayısını ve sildim sayısını almak istiyorum. örneğinflexslider'daki toplam slayt sayısını nasıl alabilirim

number of the slide/total number of the slides 

Ben 5 slaytlar varsa ve ben 2 slaytta şimdi duyuyorum, bu yüzden bu slaytların altında çıktı olacaktır. Ben "Bir sonraki nav" tıklarsanız

2/5 

o takdirde "önceki nav"

3/5 

olacak;

2/5 

Bu, flexslider'da mümkündür? eğer evet, nasıl yapılır?

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

Ve birlikte aktif slayt sayısını bulabilirsiniz:

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

Ve böyle slayt sayısını alabilirsiniz bağlamanızdır sayfasında biçimlendirme dayanarak

cevap

3

Taban here

Ben demo fark ve diğerleri aşağıda gibi kod oluşturur:

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

Yani bu göre, kodu kullanarak istediğini elde edebilirsiniz:

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

Kaydırıcı değiştiğinde bir şeyi değiştirmek isterseniz, after geri çağrısına bir şeyler ekleyebilirsiniz. demo

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

$ (". Slides") ("li") bulmak, OP'nin istemediği çok fazla 'li' bulacaksınız. – pktangyue

10

bu web sitesine göre, ca ile yapabilirsiniz llback API'sı. http://www.woothemes.com/flexslider/. Flexslider'ı başlattığınızda ve kaydırıcıyı girdiğinizde Start ve After callback yöntemini yazın. Sonra ihtiyacınız olanı almak için slider.count ve slider.currentSlide kullanın. Aşağıdaki kodumda $ slider_wrap, $ current_slide ve $ total_slides sadece kaydırıcı sayımını görüntülemek istediğim jQuery nesnelerine atanan değişkenlerdir. Slider.currentSlide + 1 yaptım çünkü ilk slayt aslında dizide 0'dır.

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

için bir eleman oluşturmayı deneyin (Ben görüntülerin sayısı için bir tamsayı üretmek için PHP kullanıyorum gerçi ...) Şu anda slayt indeksi oluşturmak için aynı şeyi yapıyorum

slayt endeksi ...

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

... ve kullandıktan sonra: function ...

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

Cevabı burada bulabilirsiniz: 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> 

hatta ilk slayt başlangıç ​​fonksiyonunda ekleyebilir sayılacak isterseniz:

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

numaranın 1 (0 değil) ile başlayacak akım slaytı istiyorsanız yapabilecekleriniz

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

Bu en iyi yoldur. – Justin

0

sürgüsünü alın ve daha sonra kullanmak sayımı: do

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

İlgili konular