如何从第一张幻灯片开始设置SWIPER

Question

我的刷卡器有问题(http://www.idangero.us/sliders/swiper/api.php)。。。我在第1页，当我切换到第2页时，我希望滑块从第一张幻灯片开始。我将mySwiper.swipeTo设置为（0，0，false）；在页面上显示，但它不起作用。最奇怪的是，如果我切换到第二张或第三张幻灯片（例如mySwiper.swipeTo（1，0，false）或mySwiper·斯wipeTo。为什么？我尽了一切可能。它不会在第一张幻灯片上切换，只在其他幻灯片上切换。唯一有效的方法是在幻灯片上显示，但它很难看，因为它首先显示一张幻灯片，然后显示另一张幻灯片。。我也试过用mySwiper.swipeRev（）；有几次，但它在第二张幻灯片上被挡住了。它不会在第一张幻灯片上继续。

更新：

以下是jsfiddle示例：http://jsfiddle.net/alecstheone/9VBha/103/

所以。。。如果我转到第二页，滑动到第三张幻灯片，然后右键单击并返回，然后返回到第2页，则滑动器仍在幻灯片3上，当我设置时，它应该在第1页

mySwiper.swipeTo(0, 1, true);  

如果我设置：

mySwiper.swipeTo(1, 1, true);  
or
mySwiper.swipeTo(2, 1, true);  

它有效。。。只有在0上它不会。。。

我还注意到，在1.8.0版本的swipper中，它可以使用该命令，但在最新版本（2.6.0）中，它不会。

Answer 1

 const swiper2 = new Swiper('.swiper-container2', {
  direction: 'vertical',
  slidesPerView: 1,
  initialSlide: 2,
});

您可以使用initialSlide设置第一张幻灯片

Answer 2

如果您在库中查找方法swipeTo()，您会发现以下条件：

if (index > (_this.slides.length - 1) || index < 0) return;

这表明您只能使用索引1中的此方法。

为什么不在没有pageBeforeShow选项的情况下初始化插件呢？应该是第一张幻灯片。

更新

终于开始工作了，我也希望作者能读到这篇文章，因为这是一个糟糕的库，因为在整个脚本中，配置参数都很糟糕。

$(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);
});

正如您所看到的，注释的功能看起来很简单，但只会给使用它的人带来挫折。对我来说，这是命名约定和布尔陷阱中的一个设计缺陷。

我还注意到您动态设置了height和width，我相信"有一种方法"可以让脚本计算这些参数，因为它对getComputedStyle()使用了polyfill。或者您可以尝试使用CSS3 calc()来降低JS的性能。

第二次我使用这个库时，我不得不再次使用未优化的版本来调试函数和它的参数设置，它们不能很好地配合使用。只有一组组合才能使这个库正常工作，这取决于开发人员来解决整个问题。

祝脚本好运，并注意所提供的代码确实（非常快）帮助理解了问题。

演示

Answer 3

在这次讨论几个月后，我也遇到了同样的问题。我知道这是一种解决问题的丑陋方法，但这是我找到的唯一方法：

当您调用mySwiper.swipeTo（0）时，下面的行：

if (newPosition === currentPosition) return false;

将返回false并且不应用滑动，因为newPosition=0并且currentPosition=0

所以我把方法上的这一行改为

if (newPosition === currentPosition && newPosition !== 0) return false;

现在效果很好。

Answer 4

因为不起作用

mySwiper.swipeTo(0, 1, false)

你也可以像一样强制

var swiper = new Swiper(
    ".swiper-container",
    slideConfigs
);
swiper.on('beforeInit', function () {
    swiper.slideTo(1, 1, false)
    swiper.slidePrev(1, false)
})
swiper.init()

别忘了把它添加到你的配置中

init: false,