如何在bxslider中的每张幻灯片之间应用不同的延迟

Question

有没有一种方法可以使bxslider中每张幻灯片之间的延迟时间保持不同？假设我在bxslider中有4张幻灯片，我希望第一张和第二张幻灯片之间的延迟为1000ms，第三张和第四张幻灯片之间的延迟为2000ms。

这可能吗？

Answer 1

这可能是可能的，但不是很漂亮。基本上，就bxslider文档而言，我无法为特定的单个幻灯片过渡间隔设置时间。因此，这就是您可能遇到的问题。需要在JavaScript中使用事件处理程序：

假设CSS选择器.bxslider在HTML元素住房得到您的滑块的内容，你想慢（2000毫秒）的幻灯片过渡是第三到第四幻灯片只有 ...并假设你已经设置并初始化你的滑块，你解决方案可能如下所示（用椭圆形表示您将要设置的其他选项/已经设置好的选项，我将对此进行介绍）：

var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: 1000,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (newIndex === 2) { // remember, it's zero based indices with bxslider...
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(3);
                slider.startAuto();
            }, 2000);
        }
    }
});

基本上，当我们点击第三张幻灯片时，我们将停止自动播放，以便我们可以手动控制幻灯片的“在场”持续时间。2000 ms结束后，我们将滑块手动移至下一帧，然后重新启动自动播放。如果您有较大的幻灯片放映，并希望以一种更有条理的方式进行，则它会/可能看起来像这样：

var params = {
    defaultSpeed: 1000,
    speedOverrides: {
        "2": 2000
        // you can add other slides here,
        // with the slide number used being the
        // first slide of the slide transition,
        // i.e., modifying the speed of 3-4, like
        // above means you'd enter "2" as the
        // property name, b/c again we're using
        // 0-based indices.
    }
};
var slider = $('.bxslider').bxSlider({
    // ...
    // other params here
    // ...
    speed: params.defaultSpeed,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (params.speedOverrides[newIndex]) {
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(newIndex + 1);
                slider.startAuto();
            }, params.speedOverrides[newIndex]);
        }
    }
});