Setting breakpoints with media queries? (feature request)

[pflind]

It'd be great if you could set responsive breakpoints with CSS instead of javascript, like so:

.slide-item {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .slide-item { width: 50%; }
}

[NickPiscitelli]

That would be neat, but unfortunately, there really is no great way of achieving this; especially while retaining a light footprint.

Percentage based layouts are relative to the container which grows with the list so a percentage does not cleanly apply. You could always use viewport units with slidesToShow set to auto, or simply set the slide widths in Javascript before initializing the slider.

[pflind]

@NickPiscitelli Maybe take some ideas from Flickity, it uses media queries as well as flexbox and is kind of lightweight too.

Also, I could not find an option for setting margin between items in Glider, this should be a setting at each breakpoint.

[NickPiscitelli]

You can apply padding to the slide elements or margin to the children, I don't see the need for adding this as an option when a wrapper div will solve the issue as well.

On Mon, Apr 15, 2019 at 3:55 AM pflind notifications@github.com wrote:

@NickPiscitelli https://github.com/NickPiscitelli Maybe take some ideas from Flickity https://github.com/metafizzy/flickity, it uses media queries as well as flexbox and is kind of lightweight too.

Also, I could not find an option for setting margin between items in Glider, this should be a setting at each breakpoint.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NickPiscitelli/Glider.js/issues/44#issuecomment-483147132, or mute the thread https://github.com/notifications/unsubscribe-auth/ABm9lSZIHelwEGd4H0CfRkr5Qgt5PgKFks5vhDCMgaJpZM4ct-sS .

[pflind]

Well, if you have a background or a border around the children you can't use padding.

You can't add margin between children with CSS without getting margins on the track sides. Then you have to use negative margins and other sorts of hacks that you may not want to use.

Margin should be an JS-option, in my opinion.

The dream solution would be CSS Grid with grid-gab in combination with media queries and you could remove many of the current javascript options 😊

[NickPiscitelli]

Well, if you have a background or a border around the children you can't use padding.

Sure you can, you just need to add more wrapping elements.

You can't add margin between children with CSS without getting margins on the track sides.

How so? You can just use the :first-child and :last-child pseudo selectors, as well as the + adjacent sibling selector, to achieve this. Glider.js is not a carousel and does not clone any elements so these selectors will work as intended.

The dream solution would be CSS Grid with grid-gab in combination with media queries

You should be able to use CSS Grid currently, while I have never tried, there should be nothing stopping you; although I'm not sure how well it plays with overflow. Glider.js does not care about the CSS though, as long as the items are equal width, it will happily operate on them. Try it out and let me know if you have any issues getting it work, I'd be willing to make some modifications to support this.

On Mon, Apr 15, 2019 at 7:21 AM pflind notifications@github.com wrote:

Well, if you have a background or a border around the children you can't use padding.

You can't add margin between children with CSS without getting margins on the track sides. Then you have to use negative margins and other sorts of hacks that you may not want to use.

Margin should be an JS-option, in my opinion.

The dream solution would be CSS Grid with grid-gab in combination with media queries and you could remove many of the current javascript options 😊

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/NickPiscitelli/Glider.js/issues/44#issuecomment-483212281, or mute the thread https://github.com/notifications/unsubscribe-auth/ABm9lZIaFn80_R8xnv_EXb13--uhQshAks5vhGDPgaJpZM4ct-sS .