WIP: Slider, Carousel not working in sub mega menu

Bugs
1

I created a slider in a template called template A, and I used it as a sub mega menu item in the menu. I use the Nav Menu widget with mega menu functionality enabled.
I have created some static content using text widgets or list icons and they are all displayed, but only the slider items are not displayed, because the css opacity is overridden. But when I edit the css code, it doesn’t run the slide but shows all the items in that slide. Is there any way to edit it?

img-1
img-11911Ă—868 176 KB

img-2
img-21892Ă—705 77.6 KB

img-3
img-31875Ă—733 213 KB

When editing with Bricks, the slider works normally, but when viewing in the customer interface, the slider does not work. Thanks for watching. Have a nice day!

2

Hi Nguyá»…n,
Thanks so much for your report!

I reproduced the issue and added it to our bug tracker.

Best regards,
timmse

1 Like
DUPLICATE: Carousel/Slider in a megamenu doesn't work
3

Necroing old thread, but I solved this my just initializing the slider manually with this kind of javascript:

document.addEventListener('DOMContentLoaded', function() {
    // Wait a bit more for all elements to be ready
    setTimeout(function() {
        const sliderElement = document.getElementById('brxe-gebxvo');
        
        if (sliderElement && !sliderElement.splide) {
            // Remove is-initialized class if it exists but slider isn't working
            sliderElement.classList.remove('is-initialized');
            
            // Initialize Splide manually
            const splide = new Splide('#brxe-gebxvo', {
                type: 'loop',
                perPage: 3,
                padding: '1px',
                gap: '3.2rem',
                rewind: false,
                pagination: false,
                arrows: true,
                perMove: 1,
                autoHeight: true,
                breakpoints: {
                    991: {
                        perPage: 2,
                        gap: '1.6rem',
                        padding: { right: '20%' },
                        arrows: false
                    },
                    478: {
                        perPage: 1,
                        gap: '1.6rem',
                        padding: { right: '20%' },
                        arrows: false
                    }
                }
            });
            
            splide.mount();
        }
    }, 100);
});

(Splide settings are here because I’m using custom settings.)

4

Hi @timmse,
Is there any progress on this? I have this current bug on my own site.
https://testinc.nl/ (mobile menu).
The slider doesn’t open immediately, it’s under the “Vacatures” on the first item. you first have to close the menu and open it again or select a different menu item to make it open…

5

Any news for this? splide and swiper no works in megamenu. How to reload swiper?

6

This script reload a Swiper carrousel inside a megamenu.

document.addEventListener(“DOMContentLoaded”, function() {

    // FunciĂłn principal que gestiona el slider
    const gestionarSlider = (menuItem) => {
        const sliderEl = menuItem.querySelector('.bricks-swiper-container');
        
        // Si no hay slider, adiĂłs
        if (!sliderEl) return;

        // Buscamos el PADRE (Wrapper) para encontrar las flechas que están fuera
        const wrapper = sliderEl.parentElement; 
        const arrowNext = wrapper ? wrapper.querySelector('.bricks-swiper-button-next') : null;
        const arrowPrev = wrapper ? wrapper.querySelector('.bricks-swiper-button-prev') : null;

        // CASO 1: El Swiper YA existe -> Lo actualizamos
        if (sliderEl.swiper) {
            sliderEl.swiper.update();
            if (sliderEl.swiper.navigation) sliderEl.swiper.navigation.update();
            if (sliderEl.swiper.pagination) sliderEl.swiper.pagination.update();
        } 
        // CASO 2: El Swiper NO existe -> Lo creamos nosotros
        else if (window.Swiper && sliderEl.dataset.scriptArgs) {
            try {
                // 1. Limpieza de seguridad por si las comillas vienen mal
                let jsonArgs = sliderEl.dataset.scriptArgs;
                if (jsonArgs.includes('"')) {
                    jsonArgs = jsonArgs.replace(/"/g, '"');
                }

                // 2. Leemos la configuraciĂłn
                const config = JSON.parse(jsonArgs);
                
                // 3. Opciones obligatorias para Mega Menu
                config.observer = true;
                config.observeParents = true;
                config.observeSlideChildren = true;

                // --- CORRECCIĂ“N DE FLECHAS ---
                // Si encontramos las flechas fuera, se las asignamos explĂ­citamente
                if (arrowNext && arrowPrev) {
                    config.navigation = {
                        nextEl: arrowNext,
                        prevEl: arrowPrev
                    };
                }

                // 4. Iniciamos el Swiper manualmente
                new Swiper(sliderEl, config);
                
                // Añadimos clase para evitar parpadeos
                sliderEl.classList.add('swiper-initialized');
                
            } catch (e) {
                console.error("Error al iniciar Swiper manualmente:", e);
            }
        }
    };

    // --- ACTIVADORES ---
    // Seleccionamos items de menĂş con hijos (Mega Menu)
    const menuItems = document.querySelectorAll('.brxe-nav-nested li, .menu-item-has-children, .brxe-popup');

    menuItems.forEach(item => {
        let yaIniciado = false;

        item.addEventListener('mouseenter', () => {
            if (yaIniciado) return; 

            // Esperamos 50ms a que el menĂş se haga visible (display: block)
            setTimeout(() => {
                gestionarSlider(item);
                yaIniciado = true; // Bloqueo para evitar LAG
            }, 50);
        });
        
        // Soporte para Click (MĂłvil)
         item.addEventListener('click', () => {
            if (yaIniciado) return;
            setTimeout(() => {
                gestionarSlider(item);
                yaIniciado = true;
            }, 50);
        });
    });
});
7

Hi,
Sorry for the late reply. The task is still in progress/has not yet been resolved. I’m glad you’ve found a temporary solution :flexed_biceps: