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，是 "wrong" 的设计：https://github.com/nolimits4web/Swiper/issues/1205

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

mySwiper.slides.length - 2

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

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

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

Answer 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。

Answer 3

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

此功能（已测试且有效）是在 Swiper GitHub 问题页面的此线程中提供给我的：Need a way to get the accurate activeIndex in loop mode

In loop mode active index value will be always shifted on a number of looped/duplicated slides. you can get attribute 'data-swiper-slide-index' with a function like:

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

Usage:

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

Answer 4

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

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

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

开头

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

Answer 7

2020 年更新：

假设您正在使用 ionic angular： <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 循环为真时滑动器滑动计数

iDangero.us Swiper slide count when loop is true

javascript

jquery

slider

swiper