我想通过这个很棒的 JS slider ( Swiper ) 使用其完整的 API 实现特定行为,但直到此刻我运气不佳......需要一些帮助:
现状:
- 开头只有一张幻灯片。
我想要的每次点击按钮是:
- 在每种情况下,在第一个幻灯片之前动态创建新幻灯片 --> 很简单,使用 Swiper API 的 prepend() 方法:)
- 但是(这就是问题所在)我希望最终用户有一种刚刚加载上一张幻灯片的感觉,即单击按钮并看到向左滑动过渡......
我想要这种“罕见”的行为,因为我的 slider 必须显示数百张幻灯片,并且从一开始就一次加载所有幻灯片会导致页面加载极其缓慢,因为它必须下载数百张图像......
提前致谢。
最佳答案
我终于让它工作了,就像这样:
单击按钮(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();
}
});
我希望它对某人有帮助。 谢谢。
关于javascript - 滑动 slider 。准备一张幻灯片并模拟过渡到它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23137771/