javascript 如何获取flexslider中的幻灯片总数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14638996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get the total number of slides in flexslider
提问by gadss
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.
我正在使用 flexslider http://www.woothemes.com/flexslider/，现在我想获得幻灯片的总数和幻灯片的数量。
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.
例如，如果我有 5 张幻灯片并且我现在在第二张幻灯片中，那么这将是幻灯片下方的输出。
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?
在 flexslider 中可能吗？如果是，怎么做？
采纳答案by pktangyue
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:
因此，根据this，您可以使用代码获得所需的内容：
var index = $('li:has(.flex-active)').index('.flex-control-nav li')+1;
var total = $('.flex-control-nav li').length;
回答by Leissa
You can find the answer here:http://www.woothemes.com/flexslider.
您可以在这里找到答案：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:
如果您甚至想要计算第一张幻灯片，您可以添加 start 函数：
$('.current-slide').text(slider.currentSlide);
If you want the current-slide to begin with number 1 (not 0) you can do:
如果您希望当前幻灯片以数字 1（而不是 0）开头，您可以执行以下操作：
$('.current-slide').text(slider.currentSlide+1);
回答by Kyle
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.
根据此网站，您可以使用回调 API 来完成。http://www.woothemes.com/flexslider/。实例化flexslider的时候写一个Start和After回调方法，传入slider。然后使用slider.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);
}
});
回答by ericponto
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 aftercallback.
如果你想在滑块改变时改变一些东西，你可以在after回调中添加一些东西。
$(".mybox").flexslider({
after: function() {
// update the count
}
});
回答by Ed Williams
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)
我目前正在做完全相同的事情来生成幻灯片索引（...虽然我使用 PHP 为图像数量生成一个整数）
Try creating an element for the slide index...
尝试为幻灯片索引创建一个元素...
<p class="slideIndex"></p>
...and use the after:function...
...并使用 after:function ...
$('.flexslider').flexslider({
after: function(slider) {
slider.find('.slideIndex').html(slider.currentSlide + 1);
}
});
回答by kalifa17
Get the slider and then use count:
获取滑块，然后使用计数：
$(yourslider).data('flexslider').count
$(yourslider).data('flexslider').count
