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
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…