滑动滑块.准备一张幻灯片并模拟到它的过渡



我想用这个很棒的JS滑块(Swiper)使用其完整的API实现特定的行为,但我现在运气不佳。。。需要一些帮助:

现状:

  • 开头只有一张幻灯片

每次单击按钮时我想要的是:

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

我想要这种"罕见"的行为,因为我的滑块必须显示数百张幻灯片,而从一开始一次加载所有幻灯片会导致页面加载极其缓慢,因为它必须下载数百张图像。。。

提前谢谢。

我终于让它工作了,就像这样:

单击按钮(带有class="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();
    }
});

我希望它能帮助到别人。谢谢

相关内容

  • 没有找到相关文章

最新更新