2013-02-01 22 views
6

में स्लाइड्स की कुल संख्या कैसे प्राप्त करें मैं flexslider http://www.woothemes.com/flexslider/ का उपयोग कर रहा हूं, अब मैं स्लाइड्स की कुल संख्या और सिल्ड्स की संख्या प्राप्त करना चाहता हूं।flexslider

number of the slide/total number of the slides 
उदाहरण के लिए

अगर मैं 5 स्लाइड है और मैं 2 स्लाइड में अब कर रहा हूँ, तो यह स्लाइड नीचे उत्पादन किया जाएगा।

2/5 

अगर मैं "अगले एनएवी" पर क्लिक करें यह बन जाएगा

3/5 

अगर "पिछला एनएवी";

2/5 

यह flexslider में संभव है? यदि हां, तो यह कैसे करें?

उत्तर

3

बेस here

मैं डेमो नोटिस और दूसरों से नीचे की तरह कोड उत्पन्न करेगा:

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

तो इस हिसाब से, तुम क्या आप कोड का उपयोग कर चाहते हैं प्राप्त कर सकते हैं:

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

उस पृष्ठ आप आप इस तरह स्लाइड की संख्या प्राप्त कर सकते हैं लिंक में मार्कअप के आधार पर:

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

और आप के साथ सक्रिय स्लाइड की संख्या पा सकते हैं:

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

और यदि आप स्लाइडर बदलते समय कुछ बदलना चाहते हैं, तो आप after कॉलबैक में कुछ जोड़ सकते हैं। डेमो पर

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

'$ (" स्लाइड ")। ढूंढें (" ली ") 'बहुत अधिक' ली 'मिलेगा जो ओपी नहीं चाहता है। – pktangyue

10

इस वेबसाइट के अनुसार, आप इसे सीए के साथ कर सकते हैं लॉब एपीआई। http://www.woothemes.com/flexslider/। जब आप flexslider को तुरंत चालू करते हैं, और स्लाइडर में पास करते हैं तो एक स्टार्ट और कॉलबैक विधि के बाद लिखें। फिर आपको जो चाहिए उसे प्राप्त करने के लिए स्लाइडर.count और slider.currentSlide का उपयोग करें। नीचे दिए गए मेरे कोड में, $ slider_wrap, $ current_slide और $ total_slides केवल jQuery ऑब्जेक्ट्स को असाइन किए गए चर हैं जहां मैं स्लाइडर गिनती प्रदर्शित करना चाहता था। मैंने slider.currentSlide + 1 किया क्योंकि पहली स्लाइड वास्तव में सरणी में 0 है।

$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

मैं वर्तमान में बिल्कुल वही बात कर रहा हूँ स्लाइड सूचकांक उत्पन्न करने के लिए (... हालांकि मैं छवियों की संख्या के लिए एक पूर्णांक उत्पन्न करने के लिए PHP का उपयोग कर रहा हूँ)

के लिए एक तत्व बनाने का प्रयास करें स्लाइड सूचकांक ...

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

... और उपयोग करने के बाद: समारोह ...

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

आप यहां जवाब पा सकते हैं: 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> 

तुम भी पहली स्लाइड आप शुरू समारोह में जोड़ सकते हैं गिना जा करना चाहते हैं:

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

आप नंबर 1 (नहीं 0) के साथ शुरू करने के लिए वर्तमान स्लाइड चाहते हैं आप कर सकते हैं है:

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

यह सबसे अच्छा तरीका है। – Justin

0

स्लाइडर जाओ और उसके बाद का उपयोग गिनती:

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