Swiper滑块。预设一张幻灯片并模拟过渡到它

时间:2014-04-17 15:50:41

标签: javascript jquery slider swiper

我希望使用这个令人敬畏的JS滑块(Swiper)使用其完整的API实现特定的行为,但直到现在我还不幸...需要一些帮助:

现状:

  • 开头只有一张幻灯片。

我想要每次点击按钮时:

  • 在每种情况下在第一张幻灯片之前动态创建新幻灯片 - >简单的事情,使用Swiper API的prepend()方法:)
  • 但是(这就是问题)我希望最终用户感觉只是加载前一张幻灯片,即点击按钮并看到向左滑动过渡...

我想要这种“罕见”行为,因为我的滑块必须显示数百张幻灯片,并且从头开始一次加载所有幻灯片会导致页面加载速度极慢,因为它必须下载数百张图片...

提前致谢。

1 个答案:

答案 0 :(得分:2)

我终于得到了它,就像这样:

点击按钮(类=" prev")后:

$(document).on('click', '.prev', function() {

    // If it is the first slide...
    if (mySwiper.activeIndex == 0) {

        // Slide content
        var slide = '<p>New slide</p>';

        // Creation of the slide (it instantly moves to index 0 --> the new slide)
        mySwiper.prependSlide(slide);

        // And then instant (speed = 0) swipe to slide with index 1
        // (the one we were watching before creating the new...)
        mySwiper.swipeTo(1, 0, false);

        // Finally, we implement the visual transition to new slide (index 0)
        mySwiper.swipePrev();
    }
});

我希望它对某人有所帮助。 感谢。