Javascript 循环为真时的iDangero.us Swiper滑动计数

我正在使用iDangero.us Swiper js创建一个网页，初始化代码如下：

var mySwiper = new Swiper( '.swiper-container', {
    direction: 'horizontal',
    loop: true,
    speed: 600,
    nextButton: '.slider-control-next',
    prevButton: '.slider-control-prev',
} );

我需要得到当前的滑块索引和滑块总数。Swiper API提供了mySwiper.activeIndex属性和mySwiper.slides，但问题是当循环为true时，它们不会给出正确的索引和计数

---

当循环为真时，有没有办法正确获取这些数字？

当涉及循环时，幻灯片的数量，因此有时

activeIndex

，在设计上是“错误的”：

我能找到的获取幻灯片总数的最佳方法是：

mySwiper.slides.length - 2

您可以使用它来获取当前索引（此索引是基于零的）：

---

当然，这并不理想。您可以并建议添加访问这些值的更方便的方法。

虽然这个问题已经得到了回答，但我认为我应该根据公认的答案添加我的工作代码

我在循环库中遇到的主要问题是，如果从第一张幻灯片返回，当前幻灯片显示为0。可能是因为它是克隆人

无论如何，这里有一个精简的（未经测试的）工作解决方案：

(function($) {

    'use strict';

    var gallery;

    gallery = $('#gallery').swiper({
        parallax: false,
        initialSlide: 0,
        direction: 'horizontal',
        loop: true,
        autoplay: 5000,
        autoplayDisableOnInteraction: false,
        speed: 700,
        preventClicks: true,
        grabCursor: true,
    });

    var totalSlides = gallery.slides.length - 2;

    $('#total').html(totalSlides);

    gallery.on('slideChangeEnd', function(instance) {

        var currentCount = (instance.activeIndex - 1) % (totalSlides) + 1;

        if(currentCount === 0) {
            $('#current').html(totalSlides);
        } else {
            $('#current').html(currentCount);
        }

    });

})(jQuery);

---

使用以上选项可在页面上显示当前幻灯片和全部幻灯片。显然，要相应地调整HTML中的ID。

我认为实际索引值的这个值应该在Swiper API中可用，尽管找不到，所以现在您必须滚动自己的函数才能获得该值

在Swiper GitHub问题页面上的这个线程中向我提供了这个函数（已测试且有效）：

在循环模式下，活动索引值将始终在多张循环/复制幻灯片上移动。您可以使用以下函数获取属性“data swiper slide index”：

用法：

---

只是添加了另一个答案，因为Swiper还没有包含

realIndex

属性。下面是一个在循环时获取实际索引的好方法，不需要减去硬编码的数字（可能很容易更改）

这样使用：

var slider = new Swiper('.swiper-container');
slider.on('slideChangeEnd', function(e) {
    var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
    // do whatever
});

---

无论循环与否，这两种模式都适用

var $slideActive = $('.swiper-slide-active');
var realIndex = $slideActive.data('swiper-slide-index');
if(typeof realIndex === 'undefined') {
    realIndex = $slideActive.index();
}

此外，两种模式下的总幻灯片数：

var totalSlides = $('.swiper-slide:not(.swiper-slide-duplicate)').length;

---

截至2016年5月，他们已添加realIndex属性

需要注意的事项：1.）realIndex属性以字符串形式返回，而不是以整数形式返回（以防万一您需要使用它进行数学运算）2.）realIndex属性以0开头（正如它应该的那样），而不像循环模式中的activeIndex以1开头

2020年更新：

假设您使用的是离子角度：

然后在您的打字脚本中：

@ViewChild('slider', {static: true}) slider: IonSlides;
changeBoss(e){
    let realIndex=e.target.swiper.realIndex;
    console.log(realIndex);
  }

---

这将为您提供真正的索引

谢谢您的回答。“myswider.slides.length-2”似乎返回了正确的幻灯片数量，但正如您所提到的，当索引从零开始时，activeIndex为第一张幻灯片返回2。我想我需要打开github的问题。哦。。我的错误。。您获取当前幻灯片的方式现在返回正确的幻灯片编号，但我同意这不是一种理想的方式。现在已添加realIndex属性！非常感谢。我也有同样的问题。很明显，这是因为一天的重复次数可能超过2次，但如果API不同时提供

slides

和类似

realsides

的内容，那么这是最好的方法。不需要jquery，您可以使用

e.slides[e.activeIndex].attributes['data-swiper-slide-index'].value

我经常使用swiper js。这就是我的工作！但我必须将其转换为整数才能对其执行操作：parseInt（e.slides.eq（e.activeIndex.attr（'data-swiper-slide-index'）；

var slider = new Swiper('.swiper-container');
slider.on('slideChangeEnd', function(e) {
    var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
    // do whatever
});

var $slideActive = $('.swiper-slide-active');
var realIndex = $slideActive.data('swiper-slide-index');
if(typeof realIndex === 'undefined') {
    realIndex = $slideActive.index();
}

var totalSlides = $('.swiper-slide:not(.swiper-slide-duplicate)').length;

@ViewChild('slider', {static: true}) slider: IonSlides;
changeBoss(e){
    let realIndex=e.target.swiper.realIndex;
    console.log(realIndex);
  }