javascript 如何设置 SWIPER 从第一张幻灯片开始？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23090580/
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
How to set SWIPER start with the first slide?
提问by Alex Stanese
I have an issue with the swiper (http://www.idangero.us/sliders/swiper/api.php)... I am on page 1 and when I swich to the page 2 I want the slider to start with the first slide. I set mySwiper.swipeTo(0, 0, false); on pagebeforeshow and it doesnt work. the STRANGEST thing is that it works perfectly if I swich to second or third slide (ex mySwiper.swipeTo(1, 0, false) or mySwiper.swipeTo(2, 0, false)) but on the first one (0) it simply doesn't swich. Why is that? I tried every possible thing. It doesn't switch on the first slide, only on others. The only method that works is onpageshow but its ugly because first it shows one slide and after another.. I also tried with mySwiper.swipePrev(); a few times but its blocking on slide 2.. It wont go on the first slide.
我的 swiper ( http://www.idangero.us/sliders/swiper/api.php)有问题...我在第 1 页，当我切换到第 2 页时，我希望滑块以第一张幻灯片。我设置了 mySwiper.swipeTo(0, 0, false); 在 pagebeforeshow 上，它不起作用。最奇怪的是，如果我切换到第二张或第三张幻灯片（例如 mySwiper.swipeTo(1, 0, false) 或 mySwiper.swipeTo(2, 0, false)），它可以完美运行，但在第一个 (0) 上它只是不切换。这是为什么？我尝试了一切可能的事情。它不会在第一张幻灯片上切换，只会在其他幻灯片上切换。唯一有效的方法是 onpageshow 但它丑陋，因为它首先显示一张幻灯片，然后显示另一张..我也尝试过 mySwiper.swipePrev(); 几次，但它在幻灯片 2 上被阻塞。它不会在第一张幻灯片上继续。
UPDATE:
更新：
here's the jsfiddle example: http://jsfiddle.net/alecstheone/9VBha/103/
这是 jsfiddle 示例：http: //jsfiddle.net/alecstheone/9VBha/103/
so... if I go to second page and I swipe to the third slide than I right click and go back, than back to page 2 the swiper is still on the slide 3 and it should be on page 1 as I set
所以...如果我转到第二页并滑动到第三张幻灯片，然后右键单击并返回，然后返回到第 2 页，滑动器仍在幻灯片 3 上，它应该在我设置的第 1 页上
mySwiper.swipeTo(0, 1, true);
If I set:
如果我设置：
mySwiper.swipeTo(1, 1, true);
or
mySwiper.swipeTo(2, 1, true);
it works... only on 0 it wont...
它有效......只有在0它不会......
I also noticed that in the 1.8.0 version of the swiper it works that command, but in the latest (2.6.0) it wont.
我还注意到，在 1.8.0 版本的 swiper 中它可以运行该命令，但在最新的 (2.6.0) 中则不会。
回答by Tim Vermaelen
If you look up the method swipeTo()in the library you'll find the following condition:
如果您swipeTo()在库中查找该方法，您会发现以下条件：
if (index > (_this.slides.length - 1) || index < 0) return;
Which indicates you can only use this method from index 1.
这表明您只能使用索引 1 中的此方法。
Why don't you just initialize the plugin without the pageBeforeShowoption? It should take the first slide.
你为什么不在没有pageBeforeShow选项的情况下初始化插件？它应该是第一张幻灯片。
UPDATE
更新
Finally got it to work and I also hope the author reads this since this is a terrible library to setup as the configuration parameters go berzerk throughout the whole script.
终于让它工作了，我也希望作者阅读这篇文章，因为这是一个糟糕的设置库，因为配置参数在整个脚本中都变得疯狂。
$(page2).click(function () {
//mySwiper.activeIndex = 0;
//mySwiper.startAutoplay();
//mySwiper.swipeReset();
//mySwiper.reInit(true);
setTimeout(function(){
// to make sure the swiper-wrapper is shown after the animation of $.mobile.changePage()
mySwiper.swipeTo(0);
}, 200);
$.mobile.changePage(page2);
// $("#photo").hide().delay(1000).fadeOut();
// $("#photo").animate({opacity: 0.0}, 1);
});
As you can see, the commented functionality seems straightforward but only brings frustration to the people using this. For me this is a design flaw in naming convention and boolean traps.
如您所见，注释功能看起来很简单，但只会给使用它的人带来挫折。对我来说，这是命名约定和布尔陷阱的设计缺陷。
I also noticed you set heightand widthdynamically and I'm sure there "is a way" to let the script calculate these parameters as it uses a polyfill for getComputedStyle(). Or you might try to use CSS3 calc()to take some performance hit out of JS.
我还注意到您设置height并width动态设置，并且我确定“有一种方法”可以让脚本计算这些参数，因为它使用 polyfill for getComputedStyle(). 或者，您可能会尝试使用 CSS3calc()来降低 JS 的性能。
Second time I use this library and again I had to use the unminified version to debug the functions and it's parameter setup which doesn't work together very well. Only a set of combinations can make this library work and it's up to the developer to figure this whole bunch out.
我第二次使用这个库，我不得不再次使用未缩小的版本来调试函数，它的参数设置不能很好地协同工作。只有一组组合才能使这个库工作，而这取决于开发人员来解决这个问题。
Good luck on the script and note that the provided code really helped (very quickly) in understanding the problem.
祝脚本好运，并注意所提供的代码确实有助于（非常快地）理解问题。
回答by user4417258
I had the same problem few months after this discussion. I know it's a ugly way to fix the problem, but its the only way I found :
在这次讨论后几个月，我遇到了同样的问题。我知道这是解决问题的丑陋方法，但这是我发现的唯一方法：
When you call mySwiper.swipeTo(0), this line below :
当您调用mySwiper.swipeTo(0) 时，下面的这一行：
if (newPosition === currentPosition) return false;
will return false and not apply the swipe, because newPosition = 0 and currentPosition = 0
将返回 false 并且不应用滑动，因为 newPosition = 0 和 currentPosition = 0
so i changed this line on the method to
所以我将方法上的这一行更改为
if (newPosition === currentPosition && newPosition !== 0) return false;
and it works now fine.
它现在工作正常。
