Question

我正在使用flexslider http://www.woothemes.com/flexslider/，现在我想获得幻灯片的总数和席位数。

number of the slide/total number of the slides

例如，如果我有5张幻灯片，而我现在处于第二张幻灯片中，那么这将是幻灯片下方的输出。

2/5

如果我点击“下一个导航”，它将变为

3/5

如果“prev nav”;

2/5

有可能在flexslider？如果有，怎么办？

Answer 1

您可以在此处找到答案：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);

Answer 2

根据此网站，您可以使用回调API执行此操作。 http://www.woothemes.com/flexslider/。在实例化flexslider时写入Start和After回调方法，并传入滑块。然后使用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);
    }
  });

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

Answer 4

根据您链接的该页面中的标记，您可以获得这样的幻灯片数量：

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

您可以通过以下方式找到活动幻灯片的编号：

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

如果您想在滑块更改时更改某些内容，则可以向after回调添加内容。

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

Answer 5

我目前正在做同样的事情来生成幻灯片索引（...虽然我使用PHP生成图像数量的整数）

尝试为幻灯片索引创建元素...

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

...并使用after：function ...

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

Answer 6

获取滑块然后使用count：

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

如何获得flexslider中的幻灯片总数

6 个答案: