Fügen Sie mit TailwindCSS und Flowbite ein Karussell zu meiner Seite hinzu. Ich habe außerdem ein Kippschalterelement hinzugefügt, mit dem ich grundsätzlich zwischen den beiden Elementen im Karussell wechseln kann (aktiviert = Folie 2, deaktiviert = Folie 1).

Das funktioniert – ich blieb beim Versuch hängen, diesen Schalter beim Laden basierend auf dem in localStorage gespeicherten Wert auf „Folie 2“ zu setzen.

Ich habe überprüft, dass meine localStorage-Werte korrekt gespeichert/abgerufen werden (als „Ja“- und „Nein“-Zeichenfolgen). Ich habe dann versucht, das Karussell beim Laden auf Folie 1 („Nein“-Wert) oder Folie 2 („Ja“-Wert) einzustellen, aber egal was ich versuchte, es zeigte immer Folie 1.

Ich habe die Methoden „slideTo()“ und „next()“ ausprobiert, aber keine scheint zu funktionieren (sie funktionieren im Änderungsereignis, aber nicht in meiner Ladefunktion).

Keine Fehler in der Konsole. Wie gesagt, der Schalter funktioniert einwandfrei, nachdem die Seite geladen wurde und korrekt zwischen den Folien wechselt. Beim Laden der Seite wird nur nicht die richtige Folie eingestellt (die angezeigte Folie stimmt also nicht mit den genauen Einstellungen des Schalters überein).

Dokumentation zum Flowbite-Karussell: https://flowbite.com/docs/components/carousel/

Das ist mein Code:

window.addEventListener('load', function () {
    show_loader("service-suspended-container");

    // Sidebar Toggle Defaults and Handler
    const exclude_suspended_toggle = document.getElementById('exclude-suspended-toggle');

    // Determine which slide to display based on user's preference
    var starting_item = 0;
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        starting_item = 1;
    }
    
    const carousel_items = [
        {
            position: 0,
            el: document.getElementById('carousel-item-1')
        },
        {
            position: 1,
            el: document.getElementById('carousel-item-2')
        }
    ];

    const options = {
        defaultPosition: starting_item
    }

    // Carousel object for controlling slide
    var carousel = new Carousel(carousel_items, options);

    // Ecclude suspended toggle handler
    exclude_suspended_toggle.addEventListener('change',  (event) => {
        console.log("Event fired");
        if (event.currentTarget.checked) {
            // Make toggle checked
            console.log("Toggle now checked");
            localStorage.setItem('metrics-exclude-suspended', 'yes');
            carousel.slideTo(1);
        } else {
            // Uncheck toggle
            console.log("Toggle now unchecked");
            localStorage.setItem('metrics-exclude-suspended', 'no');
            carousel.slideTo(0);
        }
    });

    // Determine default check state of toggle and slide from user's preferences
    if (('metrics-exclude-suspended' in localStorage) && localStorage.getItem('metrics-exclude-suspended') === 'yes') {
        console.log("enabled from storage...");
        // Make toggle checked
        exclude_suspended_toggle.checked = true;
        carousel.slideTo(1);
    } else {
        console.log("disabled from storage...");
        // Uncheck toggle
        exclude_suspended_toggle.checked = false;
        carousel.slideTo(0);
    }
});