Destroying slider forces the splide_list element to have display: block

[kristiansp]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.3

Description

I'm using SplideJS as a slider, and in a redesign I want the slider only to be on mobile, and to use a flexbox layout on larger screens. Destroying the slider with breakpoints is easy enough, the problem is that Splide forces the splide_list element to have display: block when it is initialised, which then overrides the flex setting.

Since Splide forces the structure track > list > slide, the flex kind of has to be on the list element.

Even with destroy: 'completely' it sets the following class:

.splide.is-initialized:not(.is-active) .splide__list {
    display: block;
}

This must be a fairly common scenario, to not being forced to have a block element holding all the items when destroying the slider?

Reproduction Link

No response

Steps to Reproduce

1. Add a slider on a page, and have it destroy on a certain breakpoint
2. Add flex layout to the slide element for larger screens (where the slider is not used)
3. See that the slide_list containing the elements gets display: block set, overriding the desired flex layout

Expected Behaviour

I've tried setting the slider to destroy: true and destroy: 'completely' with the breakpoint setting, and it destroys alright, but the CSS is still forcing the splide_list to be a block element. I would expect it not to set any specific display setting on this element once the slider is destroyed.

[doutatsu]

Same issue here - and it's a really bad issue, as it means it's impossible to navigate using transition between routes. If I navigate to another page, you end up seeing carousel styling get removed for a split second, making it look horrible. There should be a way to either delay destroying or fixing the block issue described here

[katwlodarczyk]

Same issue here, can we have it fixed please?

[naseefpv]

Same issue here - and it's a really bad issue, as it means it's impossible to navigate using transition between routes. If I navigate to another page, you end up seeing carousel styling get removed for a split second, making it look horrible. There should be a way to either delay destroying or fixing the block issue described here

Same issue here in Nuxt 3 page transition.

temporarily fixed with following code .splide { &.is-initialized:not(.is-active) { .splide__track { .splide__list { display: flex; .splide__slide { width: 100%; } } } } }

[kristiansp]

Does anyone have a good suggestion what would be the best approach for this to work? Then maybe we could make a pull request for it. There are multiple ways to go about it, I guess, and I haven't looked at it in a while.

The reason it happens, I guess, is that the flex that Splide uses to work is set on the splide__list class itself. So when destroying, the display property has to be set to something. Or just remove the class, of course, but that would have other consequences (the possibility to re-initialise the slider, for instance, as Splide requires it to be there). That's probably not intentional in and of itself.