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

Question

我的滑动器有问题（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 上受阻。它不会在第一张幻灯片上播放。

更新：

这是 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 版本的 swiper 中，它可以使用该命令，但在最新版本（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(). 或者您可以尝试使用 CSS3calc()来消除 JS 的一些性能损失。

我第二次使用这个库时，我再次不得不使用未缩小的版本来调试函数，并且它的参数设置不能很好地协同工作。只有一组组合才能使这个库工作，并且由开发人员来解决这整个组合。

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

演示版