Responsive (mount at mobile / unmount at desktop)

[brandonpeat]

Splide seems to have a desktop-first approach to breakpoints, which is a bit confusing.

I want to have a slider at mobile, where screen space is limited. Then destroy the slider at desktop, where I have enough space to display all items in a grid.

I can't get this to work, because breakpoints have to be declared largest first, not smallest first. And each breakpoint controls behavior for that screen size and below.

So when I destroy the slider at 1024px, it destroys it for that size and smaller -- the exact opposite behavior of what I want. Now I have a slider at desktop and a grid at mobile.

breakpoints: {
      1024: {
        destroy: true,
      },
      767: {
        perPage: 2,
       // some sort of remount option here?
      },
}

Have I missed something in the documentation? How would I achieve what I'm looking for?

I'm a rube at JS and I'm sure that's part of it. But it would be nice to be able to control the breakpoints a la CSS media queries. Like 1024-767 controlling everything within that range, or some sort of min/max setting. I can see how that could be a pain to implement, but we live in a mobile-first world, and I'm having a hard time understanding why this (excellent!) codebase is not.

[brandonpeat]

Well, apparently 5 more minutes of searching the docs would have solved it! For any developers Googling here from the future:

Splide allows you to flip the query behavior with the mediaQuery property: https://splidejs.com/guides/options/#mediaquery

The default is the desktop-first max-width, so just specify min and it'll be mobile-first as God intended:

mediaQuery: 'min',
breakpoints: {
  1024: {
    destroy: true,
  },
  767: {
    perPage: 2,
  }
}

These days it seems like min should be default, but I'm going to guess that's at least partially due to supporting legacy implementations when desktops were first and/or only.

Cheers to the Splide team -- enjoy the egg on my face.

[hypeJunction]

it would be great for the Splide team to mention this under breakpoints docs. I only discovered it now after reading this post.