Change type depending on breakpoints - fade for mobile, loop for desktop

[SanboKyo]

I need the possibility to change the type of Splide depending on breakpoints - fade for mobile, loop for desktop.

It works, when I reduce the browser window (change from loop to fade), but it doesn't work, when increase it (it remains fade).

'type' isn't in the collection of options of 'breakpoints', but maybe is there a workaround?

[SanboKyo]

When I test the Splide type after increasing, it is 'loop', but in the browser Splide is fading.

I call splide.refresh() and also splide.destroy() and splide.mount() for the given breakpoint, but it remains the same.

[micka-fdz]

Hi. I think it could be a great feature for common need.

[wazynski]

+1

[Asterovim]

+1

[Asterovim]

anyone have find a fix please ?

[ajmaurya99]

Splide.js does not directly support changing the type option based on breakpoints in the way you're attempting. The type option, along with other options like direction, height, etc., is set globally for the entire Splide instance and cannot be dynamically changed per breakpoint within the same instance.

However, you can achieve a similar effect by using the mediaQuery property to switch between different configurations based on the viewport size. This property allows you to define a mobile-first or desktop-first approach to breakpoints, which can indirectly help you achieve the desired effect of having different types of slides on different devices.

Here's an example of how you might set up your Splide instance to use a fade type on desktop and a loop type on mobile

    new Splide("#your-slider-id", {
        type: 'loop', // Default type for mobile
        direction: 'ttb',
        height: '416px',
        mediaQuery: 'min', // Mobile-first approach
        breakpoints: {
            1024: {
                type: 'fade', // Type for desktop
                direction: 'ltr',
                height: '416px',
            },
        },
    }).mount();
});

[ADTC]

According to current docs, the type option is not responsive and cannot be used with breakpoints. @ajmaurya99 Is this working for you without bugs? I tried it and the SplideJS carousel becomes buggy and doesn't slide correctly. All slides get stacked, and the transitions don't work anymore.

@NaotoshiFujita would it be possible to make the type option responsive? I think when the type changes, the slider could be destroyed with old type and re-mounted with the new type.

BTW, this project didn't have any updates since 3 years ago. I think it's a great project for a lightweight carousel that's easy to setup. It will be a shame if it's abandoned and we can't get small issues like this fixed.