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();
});