WIP: Slider, Carousel not working in sub mega menu

[shully159]

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?

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!

[timmse]

Hi Nguyễn,
Thanks so much for your report!

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

Best regards,
timmse

[debesyla]

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.)