4

我的滑动器有问题（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）中它不会。

4

4 回答 4

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

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

于 2021-04-28T06:12:49.293 回答
1

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

当您调用mySwiper.swipeTo(0)时，下面的这一行：

if (newPosition === currentPosition) return false;

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

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

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

现在工作正常。

于 2015-01-04T13:01:46.090 回答
1

如果您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动态设置，并且我确信“有一种方法”可以让脚本计算这些参数，因为它使用 polyfill for getComputedStyle(). 或者你可以尝试使用 CSS3calc()来降低 JS 的性能。

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

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

演示

于 2014-04-15T17:45:47.240 回答
0

因为这不起作用

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,
于 2021-05-13T21:22:17.500 回答