javascript - bxslider で各スライド間に異なる遅延を適用する方法

Question

bxslider の各スライド間で異なる遅延時間を維持する方法はありますか? bxslider に 4 つのスライドがあるとします。1 番目と 2 番目のスライドの間に 1000 ミリ秒の遅延、3 番目と 4 番目のスライドの間に 2000 ミリ秒の遅延が必要です。

これは可能ですか？

Answer 1

おそらく可能ですが、きれいではありません。基本的に、bxslider のドキュメントからわかる限り、特定の個々のスライド遷移間隔の時間を設定することはできません。だから、ここにあなたが推測するものがあります。JavaScript で、イベント ハンドラーを操作する必要があります。

CSS セレクター.bxsliderがスライダー コンテンツを格納する HTML 要素に到達し、遅くしたいスライド トランジション (2000 ミリ秒) が 3 番目から 4 番目のスライドのみであると仮定すると、スライダーの設定と初期化が既に完了していると仮定すると、解決策は次のとおりです（省略記号は、設定する/設定済みの他のオプションを示します。これについては、私が詳しく説明しています）：

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);
        }
    }
});

基本的に、スライドの「プレゼンス」期間を手動で制御できるように、3 番目のスライドに到達したときに自動再生を停止します。2000 ミリ秒が経過したら、手動でスライダーを次のフレームに移動し、自動再生を再開します。より大きなスライド ショーがあり、これをより組織的な方法で実行したい場合は、次のようになります。

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]);
        }
    }
});

Answer 2

bxslider.js ファイルを少し編集することで、これを行うための非常に柔軟な方法を思いつきました。ここに私の答えの詳細があります：https://stackoverflow.com/a/17408119/700111

Answer 3

SlideBefore を使用します。上記の回答のコードは、最後のスライドで停止します。

onSlideBefore: function (slide, oldIndex, newIndex) {
if (params.speedOverrides[newIndex]) {
    slider.stopAuto();
    setTimeout(function () {
        slider.goToSlide(newIndex);
        slider.startAuto();
    }, params.speedOverrides[newIndex]);
}

}