Wie man unterschiedliche Verzögerungen zwischen jedem Dia in bxslider anwendet

Question

Gibt es eine Möglichkeit, zwischen jedem Dia in einem bxslider eine unterschiedliche Verzögerungszeit beizubehalten? Angenommen, ich habe 4 Dias im bxslider, ich möchte eine Verzögerung von 1000ms zwischen dem 1. und dem 2. Dia und eine Verzögerung von 2000ms zwischen dem dritten und vierten Dia.

Ist das möglich?

Answer 1

Es ist wahrscheinlich möglich, aber nicht besonders schön. Grundsätzlich, soweit ich aus der Dokumentation für bxslider entnehmen kann, können Sie keine Zeiten für spezifische, individuelle Slide-Übergangsintervalle festlegen. Also, hier ist was Sie wahrscheinlich tun müssen, in JavaScript, arbeiten mit den Ereignisbehandlern:

Angenommen, der CSS-Selektor .bxslider auf das HTML-Element zugreift, das den Inhalt Ihres Sliders enthält, und der Slide-Übergang, den Sie langsamer machen möchten (2000 ms), ist der dritte zum vierten Slide nur ... und angenommen, Sie haben Ihren Slider bereits eingerichtet und initialisiert, könnte Ihre Lösung wie folgt aussehen (durch Auslassungspunkte werden die anderen Optionen angezeigt, die Sie setzen/eingerichtet haben, die ich übersehe):

var slider = $('.bxslider').bxSlider({
    // ...
    // andere Parameter hier
    // ...
    speed: 1000,
    onSlideAfter: function (slide, oldIndex, newIndex) {
        if (newIndex === 2) { // denken Sie daran, es sind nullbasierte Indizes bei bxslider...
            slider.stopAuto();
            setTimeout(function () {
                slider.goToSlide(3);
                slider.startAuto();
            }, 2000);
        }
    }
});

Grundsätzlich stoppen wir die automatische Wiedergabe, wenn wir den 3. Slide erreichen, damit wir die Slide-"Präsenz"-Dauer manuell steuern können. Wenn die 2000 ms abgelaufen sind, bewegen wir den Slider manuell zum nächsten Frame und starten die automatische Wiedergabe erneut. Wenn Sie eine größere Diashow hätten und dies auf eine organisierte Weise tun möchten, könnte es wie folgt aussehen:

var params = {
    defaultSpeed: 1000,
    speedOverrides: {
        "2": 2000
        // Sie können hier andere Slides hinzufügen,
        // wobei die verwendete Slide-Nummer die
        // erste Slide des Slide-Übergangs ist,
        // d.h., die Geschwindigkeit von 3-4 zu ändern, wie
        // oben bedeutet, dass Sie "2" als den
        // Eigenschaftsnamen eingeben würden, weil wir wieder
        // nullbasierte Indizes verwenden.
    }
};
var slider = $('.bxslider').bxSlider({
    // ...
    // andere Parameter hier
    // ...
    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

Ich habe eine sehr flexible Möglichkeit gefunden, dies zu tun, indem ich eine kleine Änderung an der Datei bxslider.js vorgenommen habe. Hier finden Sie die Details meiner Antwort hier: https://stackoverflow.com/a/17408119/700111

Answer 3

Verwenden Sie SlideBefore. Der Code in der obigen Antwort wird am letzten Folie stoppen.

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

}