如何设置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();几次，但它在第二张幻灯片上受阻..它不会在第一张幻灯片上播放。

更新：

这是 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()

的 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,

Answer 5

如果有人遇到这个问题，在 Swiper v8.x，我使用

swiper.slideTo(0)

滑动到第一张幻灯片