Définir le nombre d'éléments du carrousel en fonction de la valeur localStorage enregistrée à l'aide de TailwindCSS et Flowbite

Question

Ajoutez un carrousel à ma page en utilisant TailwindCSS et Flowbite. J'ai également ajouté un élément de commutateur à bascule qui me permet essentiellement de basculer entre les deux éléments du carrousel (coché = diapositive 2, décoché = diapositive 1).

Cela fonctionne - là où je suis resté bloqué, j'essayais de régler cette bascule sur "Diapositive 2" lors du chargement en fonction de la valeur stockée dans localStorage.

J'ai vérifié que mes valeurs localStorage sont enregistrées/récupérées correctement (sous forme de chaînes « oui » et « non »). J'ai ensuite essayé de régler le carrousel sur la diapositive 1 (valeur "non") ou la diapositive 2 (valeur "oui") au chargement, mais peu importe ce que j'ai essayé, il affichait toujours la diapositive 1.

J'ai essayé les méthodes "slideTo()" et "next()" mais aucune ne semble fonctionner (elles fonctionnent dans l'événement change mais pas dans ma fonction de chargement).

Aucune erreur dans la console. Comme je l'ai dit, le commutateur fonctionne correctement après le chargement de la page et passe correctement entre les diapositives, il ne définit tout simplement pas la bonne diapositive lors du chargement de la page (de sorte que la diapositive affichée ne correspond pas aux paramètres exacts du commutateur).

Documentation du carrousel Flowbite : https://flowbite.com/docs/components/carousel/

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

Answer 1

Vous modifiez la propriété sélectionnée par programme, cela ne déclenchera pas l'événement de changement. Puisque l'événement change n'est pas déclenché, l'écouteur d'événement n'est pas appelé.

Une façon de déclencher un événement de changement :

const changeEvent = new Event("change")
exclude_suspended_toggle.dispatchEvent(changeEvent)

Donc dans votre code cela deviendrait :

const changeEvent = new Event("change")

// 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;
    exclude_suspended_toggle.dispatchEvent(changeEvent)
} else {
    console.log("disabled from storage...");
    // Uncheck toggle
    exclude_suspended_toggle.checked = false;
    exclude_suspended_toggle.dispatchEvent(changeEvent)
}