我想用这个很棒的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();
}
});
我希望它能帮助到别人。谢谢