glide
glide copied to clipboard
glidejs
Disable/Enable glide based on breakpoint
Hey,
thanks for this great slider, really modern coding and good execution!
I am lacking a feature i was used from slick.js.
I want to be able to disable/enable the slider/carousel based on breakpoints, as you already have the breakpoint setting and the matchMedia implemented it would make sense to add this.
See the slick docs for an example: https://github.com/kenwheeler/slick#responsive-option-example
May add the option to set a breakpoint to false and check for the boolean?
PS: I know how to do it outside of glide, but it would be nice to do it all at once ;)
Greets Marcus
Hello 👋. Thanks for the suggestion.
I'm trying to keep a core functionalities to a minimum and leave all use-case specific to be done via API. I mark this as the feature and watch if there is a large interest.
+1 on this. I use this feature all the time in Flickity. It's very useful when I want a set of elements to display 4-across on larger screens, but be able to swipe through them on mobile.
I also have needed this functionality quite a few times in the past. display a standard row or grid of items on larger screens and then initialise the carousel once we start running out of breathing space at smaller sizes. I am currently using a combination of glideJS and Simple State Manager to achieve this in case anyone is interested
Finally left Slick behind in part because their breakpoint feature is broken / doesn't work as most would intend it to out-of-the-box. Would love to see initialize-at-breakpoint implemented in the core functionality here, and I'm sure many others finally upgrading to Glide would too. Thanks!
+1!
A workaround for this would just be destroying and re-initializing on a throttled window resize but please add this soon!
+1 Would love to have this. I know glide.js is about having as light a library as possible, but look at flickity, they have a css :: after check that activates the carousel. Would love to have that as an API
+1 - essentially need the functionality of #208. Carousel content is loaded via a CMS so number of images is indeterminate. Glide duplicates slides to fill the space up to the perView which isn't ideal. The solution would be to not mount it, but then when it responds to smaller screen sizes it does need to be mounted.
Another +1 - Started commenting on https://github.com/glidejs/glide/issues/208, but realise this is basically the same feature request.
+1 here too. Like others, I'm trying to drop slick and honestly Glide is so nice to work with I'm happy to figure out a workaround as suggested in the comments in this thread. However it would be awesome to have this feature in core :)
+1 this is a must. We use carousels about 50% of time just to keep columns next to each other on mobile devices to reduce body height, so it would be nice to not init it when there is enough space.
Definitely a necessary feature, migrated from Slick which had this ability. When you have a layout that moves to sliders on mobile widths it's super important. EDIT: For anyone looking for a quick-ish solution, this can be achieved by just removing all of the glide specific classes on a breakpoint in your JS, calliing .destroy() on the slider object, and then just doing the opposite whenever you want it initialized again.
+1 as a workaround I created this function to help me at the moment. ` var glide = new Glide('.glide') var stateBreakpoint = 768;
//Initial glide state
glideState(getWindowWidth(), glide, stateBreakpoint);
//On glide resize glide state
glide.on('resize', function() {
glideState(getWindowWidth(), glide, stateBreakpoint);
});
/**
* getWindowWidth
*
* Gets the width of the current html document using the css property
*
* @return {int}
*/
function getWindowWidth(){
return parseInt($('html').css('width'));
}
/**
* glideState
*
* Sets the state of the glide slider depending on breakpoint
*
* @param {string} width
* @param {object} glide
* @param {int} breakpoint
* @return {void}
*/
function glideState(width, glide, breakpoint){
if (width < breakpoint){
glide.enable();
}else{
glide.disable()
}
}`
I found a pretty good solution, using SimpleStateManager. In my case i got a grid which displays divs in rows and columns. But if the viewport reaches a maximum of 768px the grid switches to a slider. Here is my code:
var panels;
ssm.addState({
id: "mobile",
query: "(max-width: 1110px)",
onEnter: function() {
panels = new Glide("#panels", {
type: "carousel",
startAt: 0,
perView: 2.25,
gap: 0,
bound: true,
breakpoints: {
768: {
perView: 1.25
}
}
})
panels.mount()
},
onLeave: function() {
panels.destroy()
}
});
Obviously the slider gets destroyed and the divs get reverted to rows and columns if the viewports reaches over 768px;
I hope this is helpful for someone!
Adding pointer-events: none; to the parent element for small screens did the trick for me.
Edit: Just wanted to disable slides in small screen and use slide buttons instead
Another vote for this feature! I was looking to replace Flickity with this.
+1, regret using the slider now that I know this feature isn't supported..
+1 need this for a new project to stack columns on mobile + disable glide
