7

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

number of the slide/total number of the slides

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

2/5

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

3/5

如果“上一个导航”；

2/5

在flexslider中可以吗？如果是，该怎么做？

4

6 回答 6

12

您可以在这里找到答案：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);
于 2013-08-26T16:08:23.733 回答
10

根据this website，您可以使用回调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);
    }
  });
于 2013-04-12T14:39:18.597 回答
4

基于这里的演示

我注意到演示和其他人将生成如下代码：

<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;
于 2013-02-01T03:20:00.030 回答
1

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

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

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

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

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

$(".mybox").flexslider({
  after: function() {
    // update the count
  }
});
于 2013-02-01T03:16:24.977 回答
0

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

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

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

...并使用 after:function...

$('.flexslider').flexslider({
    after: function(slider) {
        slider.find('.slideIndex').html(slider.currentSlide + 1);
    }
});
于 2013-08-21T13:02:21.437 回答
0

获取滑块，然后使用计数：

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

于 2015-08-27T15:30:32.020 回答