Question

我在使用swiper（http://www.idangero.us/sliders/swiper/api.php）时出现问题...我在第1页，当我切换到第2页时，我希望滑块从第一张幻灯片开始。我设置mySwiper.swipeTo（0,0，false）;在pagebeforeshow上，它不起作用。最重要的是，如果我切换到第二或第三张幻灯片（ex mySwiper.swipeTo（1,0，false）或mySwiper.swipeTo（2,0，false）），它完美无缺，但在第一张（0）它只是没有swich。这是为什么？我尝试了所有可能的事情。它不会在第一张幻灯片上打开，只在其他幻灯片上打开。唯一有效的方法是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

如果您在库中查找方法swipeTo()，您将找到以下条件：

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

~~表示您只能在索引1中使用此方法。~~

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

<强>更新

最后让它工作了，我也希望作者读到这个，因为这是一个可怕的库，因为配置参数在整个脚本中都是berzerk。

$(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的一些性能。

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

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

DEMO

Answer 2

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

当您致电 mySwiper.swipeTo（0）时，请在下面这一行：

if (newPosition === currentPosition) return false;

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

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

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

现在工作正常。

Answer 3

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

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

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,

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

4 个答案: