Javascript 当循环为真时 iDangero.us Swiper 幻灯片计数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29348926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iDangero.us Swiper slide count when loop is true
提问by Hakim Jaya
I'm using iDangero.us Swiper js for a webpage, and initialization code is as following:
我在网页上使用了 iDangero.us Swiper js，初始化代码如下：
var mySwiper = new Swiper( '.swiper-container', {
direction: 'horizontal',
loop: true,
speed: 600,
nextButton: '.slider-control-next',
prevButton: '.slider-control-prev',
} );
And I need to get current slider index and total count of sliders. Swiper API provides mySwiper.activeIndex property and mySwiper.slides but the problem is that when loop is true they don't give correct index and count.
我需要获取当前滑块索引和滑块总数。Swiper API 提供 mySwiper.activeIndex 属性和 mySwiper.slides 但问题是当循环为真时，它们不会给出正确的索引和计数。
Is there any way to get these numbers correctly when loop is true?
当循环为真时，有没有办法正确获得这些数字？
采纳答案by Henrik N
The number of slides, and thus sometimes the activeIndex, is "wrong" by design when loops are involved: https://github.com/nolimits4web/Swiper/issues/1205
activeIndex当涉及循环时，幻灯片的数量，因此有时是“错误”的设计：https: //github.com/nolimits4web/Swiper/issues/1205
Best way I could find to get the total number of slides is:
我能找到的获得幻灯片总数的最佳方法是：
mySwiper.slides.length - 2
You could use that to get the current index (this one is zero-based):
您可以使用它来获取当前索引（这是从零开始的）：
(mySwiper.activeIndex - 1) % (mySwiper.slides.length - 2)
This is not ideal, of course. You could open a GitHub issueand propose adding more convenient ways of accessing these values.
当然，这并不理想。您可以打开一个 GitHub 问题并建议添加更方便的方法来访问这些值。
回答by Peter Valadez
As of May 2016 they have added the realIndex property!
截至 2016 年 5 月，他们添加了 realIndex 属性！
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
需要注意的事情： 1.) realIndex 属性作为字符串而不是整数返回（以防万一您需要用它做数学运算） 2.) realIndex 属性以 0 开头（应该如此），与 activeIndex 不同在循环模式中，在我的情况下以 1 开头
回答by peirix
Just adding yet another answer, since Swiper hasn't included the realIndexproperty yet. Here is a nice little way of getting the real index when looping, without subtracting a hard coded number (which might easily change).
只是添加另一个答案，因为 Swiper 尚未包含该realIndex属性。这是在循环时获取真实索引的一个很好的小方法，无需减去硬编码数字（这可能很容易改变）。
var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
Used like this:
像这样使用：
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
});
回答by Fabri
this work in both modes, loop or not
这在两种模式下都有效，循环与否
var $slideActive = $('.swiper-slide-active');
var realIndex = $slideActive.data('swiper-slide-index');
if(typeof realIndex === 'undefined') {
realIndex = $slideActive.index();
}
also, the number of total slides in both modes:
此外，两种模式下的总幻灯片数：
var totalSlides = $('.swiper-slide:not(.swiper-slide-duplicate)').length;
回答by AhrenFullStop
update in 2020:
2020年更新：
Say you are using ionic angular:
<ion-slides #slider [options]="slideOps" (ionSlideDidChange)="changeSlide($event)">
Then in your typescript:
假设您正在使用 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);
}
This will give you the real index
这会给你真正的索引
回答by Michael Giovanni Pumo
Although this question has been answered already, I thought I'd add my working code based off the accepted answer.
虽然已经回答了这个问题，但我想我会根据接受的答案添加我的工作代码。
Main issue I had with a looping gallery, is if you go back from the first slide, the current slide reads as 0. Possibly because it's a clone?
我在循环库中遇到的主要问题是，如果您从第一张幻灯片返回，当前幻灯片显示为 0。可能是因为它是克隆？
Anyway, here's a stripped-back (slightly untested) working solution:
无论如何，这是一个精简的（稍微未经测试的）工作解决方案：
(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);
Use the above to display current and total slides on your page. Obviously adjust the ID's in your HTML accordingly.
使用上述内容在您的页面上显示当前和总幻灯片。显然，相应地调整 HTML 中的 ID。
回答by Phong
I would think this value of the actual index value should be available in the Swiper API, although it's nowhere to be found, so for now you'll have to roll your own function to get that value.
我认为实际索引值的这个值应该在 Swiper API 中可用，尽管它无处可寻，所以现在您必须滚动自己的函数来获取该值。
This function (tested and works) was provided to me in this thread on the Swiper GitHub Issues page: Need a way to get the accurate activeIndex in loop mode
在 Swiper GitHub 问题页面上的此线程中向我提供了此功能（已测试并有效）：需要一种方法在循环模式下获取准确的 activeIndex
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:
在循环模式下，活动索引值将始终在许多循环/复制的幻灯片上移动。您可以使用以下函数获取属性“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;
}
Usage:
用法：
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop:true,
onSlideChangeEnd:function(swipe){
console.log(getSlideDataIndex(swipe))
}
});
