Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

fixedWidth breakpoints not working #1306

Open fengnan1002 opened 4 months ago

fengnan1002 commented 4 months ago

Checks

Version

4.1.4

Description

I want to have 83% fixedWidth for mobile only. So I added 100% fixedWidth through breakpoints but still 83% of width and mobile padding is keep applying.

Reproduction Link

No response

Steps to Reproduce

image

{
    "drag": true,
    "flickPower": 200,
    "flickMaxPages": 1,
    "mediaQuery": "min",
    "speed": 300,
    "start": 1,
    "type": "loop",
    "fixedWidth": "83%",
    "gap": "var(--spacing-xs)",
    "padding": {
        "left": "var(--layout-margin)",
        "right": "var(--layout-margin)"
    },
    "arrows": false,
    "destroy": false,
    "pagination": true,
    "breakpoints": {
        "1024": {
            "fixedWidth": '100%',
            "gap": 0,
            "padding": 0,
            "perMove": 1,
            "perPage": 1,
            "arrows": true,
            "destroy": false,
            "pagination": true
        }
    }
}

Expected Behaviour

Is it possible to updated fixedWidth on desktop using breakpoints?

squidiw commented 1 month ago

Using breakpoints without mediaQuery: 'min', use max-width for the breakpoints. So add mediaQuery: 'min', and then add your breakpoints and I believe it should work.