Slider Display Issues Based on Select Field Value

[Jow_B (Jordan Bretton)]

Hi everyone,

I’m facing a challenge with the display of sliders on my Webflow page, which is conditioned by a value retrieved from a select field.

I have multiple sliders, and their visibility is supposed to change based on the selection in the “Choix de la gamme de design” section. However, when I change the value of the select field to display a different slider, it often only shows a single slide, even though there are multiple slides available. Interestingly, resizing the page instantly corrects the display issue.
I solved the problem of the first 3 being displayed according to checkbox by adding Webflow.ready(); when I change the display value to block. I’ve tried to do the same for the others, but it doesn’t work.

Here’s a snippet of the custom code I’ve implemented:

document.addEventListener('DOMContentLoaded', function () {
    // Sélectionner les éléments input et les conteneurs
    const choicePets = document.querySelector('input.choice-pets');
    const choiceHumans = document.querySelector('input.choice-humans');
    const choiceWildlife = document.querySelector('input.choice-wildlife');
    const petsContainer = document.querySelector('.pets-design-container');
    const humansContainer = document.querySelector('.humans-design-container');
    const wildlifeContainer = document.querySelector('.wildlife-design-container');

    // Sélectionner le select et les différents conteneurs de design
    const gammeDeDesign = document.getElementById('Choix-gamme-de-design');
    const standardContainer = document.querySelector('.standard-design-container');
    const decorContainer = document.querySelector('.decor-design-container');
    const bulleContainer = document.querySelector('.bulle-design-container');
    const motifContainer = document.querySelector('.motif-design-container');
    const thematiquesContainer = document.querySelector('.thematiques-design-container');
    const collectorsContainer = document.querySelector('.collectors-design-container');
    const naissanceContainer = document.querySelector('.naissance-design-container');
    const celebrationsContainer = document.querySelector('.celebrations-design-container');
    const saisonniereContainer = document.querySelector('.saisonniere-design-container');

    // Fonction pour gérer le display des conteneurs
    function updateDisplay() {
        // Gérer l'affichage du conteneur des animaux
        if (choicePets.checked) {
            petsContainer.style.display = 'block';
            Webflow.ready();
        } else {
            petsContainer.style.display = 'none';
        }

        // Gérer l'affichage du conteneur des humains
        if (choiceHumans.checked) {
            humansContainer.style.display = 'block';
            Webflow.ready();
        } else {
            humansContainer.style.display = 'none';
        }

        // Gérer l'affichage du conteneur des animaux sauvages
        if (choiceWildlife.checked) {
            wildlifeContainer.style.display = 'block';
            Webflow.ready();
        } else {
            wildlifeContainer.style.display = 'none';
        }
    }

    // Fonction pour gérer l'affichage des conteneurs en fonction du select
    function updateDesignDisplay() {
        const selectedValue = gammeDeDesign.value;

        // Masquer tous les conteneurs d'abord
        standardContainer.style.display = 'none';
        decorContainer.style.display = 'none';
        bulleContainer.style.display = 'none';
        motifContainer.style.display = 'none';
        thematiquesContainer.style.display = 'none';
        collectorsContainer.style.display = 'none';
        naissanceContainer.style.display = 'none';
        celebrationsContainer.style.display = 'none';
        saisonniereContainer.style.display = 'none';

        // Afficher le bon conteneur en fonction de la valeur sélectionnée
        switch (selectedValue) {
            case 'Standard - 0€':
                standardContainer.style.display = 'block';
                break;
            case 'Décor - 2€':
                decorContainer.style.display = 'block';
                break;
            case 'Bulle - 2€':
                bulleContainer.style.display = 'block';
                break;
            case 'Motif - 2€':
                motifContainer.style.display = 'block';
                break;
            case 'Collections Thématiques - 0€':
                thematiquesContainer.style.display = 'block';
                break;
            case 'Collectors - 5€':
                collectorsContainer.style.display = 'block';
                break;
            case 'Naissance - 0€':
                naissanceContainer.style.display = 'block';
                break;
            case 'Collection Célébrations - 2€':
                celebrationsContainer.style.display = 'block';
                break;
            case 'Collection Saisonnière - 3€':
                saisonniereContainer.style.display = 'block';
                break;
            default:
                // Ne rien afficher si aucune option valide n'est sélectionnée
                break;
        }
    }

    // Vérifie l'état initial
    updateDisplay();
    updateDesignDisplay();

    // Ajout d'événements aux inputs
    choicePets.addEventListener('change', updateDisplay);
    choiceHumans.addEventListener('change', updateDisplay);
    choiceWildlife.addEventListener('change', updateDisplay);
    gammeDeDesign.addEventListener('change', updateDesignDisplay);
});

Has anyone encountered a similar issue or have suggestions on how to ensure the sliders display correctly after changing the select field? Any help would be greatly appreciated!

Thanks in advance!

---

Here is my site Read-Only: Webflow - La Boutique de Tomoki