如何在弹性滑块中获取幻灯片总数

how to get the total number of slides in flexslider

本文关键字：获取 幻灯片      更新时间：2023-09-26

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

number of the slide/total number of the slides

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

2/5

如果我单击"下一个导航"，它将变成

3/5

如果是"上一个导航";

2/5

在弹性滑块中可以吗？ 如果是，怎么做？

你可以

在这里找到答案：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);

根据这个网站，你可以使用回调API来做到这一点。 http://www.woothemes.com/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);
    }
  });

基于此处的演示

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

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

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

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

您可以使用以下方法找到活动幻灯片的编号：

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

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

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

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

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

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

。并使用 after：函数...

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

获取滑块，然后使用 count：

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

相关文章：