Question

我正在使用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，但问题是当loop为true时，它们不会给出正确的索引和计数。

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

Answer 1

As of May 2016 they have added the realIndex property!

Things to be aware of: 1.) the realIndex property is returned as a string instead of an integer (just in case you need to do math with it) 2.) the realIndex property starts with 0(as it should), unlike activeIndex in loop mode which in my case started with 1

https://github.com/nolimits4web/Swiper/pull/1697

Answer 2

添加另一个答案，因为Swiper尚未包含realIndex属性。这是在循环时获取真实索引的一个很好的小方法，而不会减去硬编码的数字（可能很容易改变）。

var realIndex = 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
});

Answer 3

幻灯片的数量，有时是activeIndex，是错误的＆＃34;在涉及循环时的设计：https://github.com/nolimits4web/Swiper/issues/1205

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

mySwiper.slides.length - 2

您可以使用它来获取当前索引（此索引从零开始）：

(mySwiper.activeIndex - 1) % (mySwiper.slides.length - 2)

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

Answer 4

虽然这个问题已经得到解答，但我认为我会根据接受的答案添加我的工作代码。

我在循环库中遇到的主要问题是，如果您从第一张幻灯片返回，当前幻灯片的读数为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。

Answer 5

我认为实际索引值的这个值应该在Swiper API中可用，虽然它无处可寻，所以现在你必须使用自己的函数来获得该值。

在Swiper GitHub问题页面上的这个帖子中提供了这个功能（测试和工作）：Need a way to get the accurate activeIndex in loop mode

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

function getSlideDataIndex(swipe){
    var activeIndex = swipe.activeIndex;
    var slidesLen = swipe.slides.length;
    if(swipe.params.loop){
        switch(swipe.activeIndex){
            case 0:
                activeIndex = slidesLen-3;
                break;
            case slidesLen-1:
                activeIndex = 0;
                break;
            default:
                --activeIndex;
        }
    }
    return  activeIndex;
}

用法：

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop:true,
    onSlideChangeEnd:function(swipe){
        console.log(getSlideDataIndex(swipe))
    }
});

Answer 6

这项工作在两种模式下，循环与否

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;

Answer 7

2020年更新

假设您使用离子角： <ion-slides #slider [options]="slideOps" (ionSlideDidChange)="changeSlide($event)"> 然后在您的打字稿中：

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

这将为您提供真实的索引

Answer 8

我发现的最简单的方法是简单地计算 .swiper-slide 之前 Swiper 初始化代码运行的次数（并复制幻灯片）。

var numOfSlides = document.querySelectorAll(".swiper-slide").length;

<!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<h4>slider 1</h4>
<!-- Swiper -->
<section class="swiper-container" data-swiper="projects">
  <div class="swiper-wrapper">
    <!-- slide -->
    <a href="#" class="swiper-slide">
   
      <h3>
        Slide 1
      </h3>
    </a>
    <!-- slide -->
    <a href="#"  class="swiper-slide">
      <h3>
        Slide 2
      </h3>
    </a>
    <!-- slide -->
    <a href="#" class="swiper-slide">
      <h3>
        Slide 3
      </h3>
    </a>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>


</section>


<!-- swiper 6 JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- swiper JS Initialize -->
<script>

    
  var numOfSlides = document.querySelectorAll(".swiper-slide").length;
  console.log("numOfSlides: " + numOfSlides);/* 3 */
  
  var my_swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 12,
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    loop: true,
  });
</script>

当循环为真时，iDangero.us Swiper幻灯片计数

8 个答案: