javascript - 循环为真时 iDangero.us 滑动计数

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 但问题是当循环为真时，它们不会给出正确的索引和计数。

当循环为真时，有什么方法可以正确获取这些数字？

Answer 1

activeIndex当涉及循环时，幻灯片的数量，因此有时是设计“错误”的： https ://github.com/nolimits4web/Swiper/issues/1205

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

mySwiper.slides.length - 2

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

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

当然，这并不理想。您可以打开一个 GitHub 问题并建议添加更方便的方式来访问这些值。

Answer 2

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

需要注意的事项：1.) realIndex 属性作为字符串而不是整数返回（以防万一你需要用它做数学运算） 2.) realIndex 属性以 0 开头（应该如此），与 activeIndex 不同在循环模式中，在我的情况下以 1 开头

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

Answer 3

只需添加另一个答案，因为 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 4

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

在 Swiper GitHub 问题页面上的这个线程中向我提供了这个功能（经过测试和工作）：需要一种在循环模式下获取准确的 activeIndex 的方法

在循环模式下，活动索引值将始终在多个循环/复制幻灯片上移动。您可以使用以下功能获取属性“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 5

这在两种模式下都有效，循环与否

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 6

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 7

尽管已经回答了这个问题，但我想我会根据接受的答案添加我的工作代码。

我对循环画廊的主要问题是，如果您从第一张幻灯片返回，当前幻灯片的读数为 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 8

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

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>