Disable/Enable glide based on breakpoint

[derpoho]

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

[jedrzejchalubek]

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.

[elivz]

+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.

[bw1984]

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

[bw1984]

this is basically what i was attempting to describe in #208

[Abby805]

+1

[mandynicole]

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!

[markjoeljimenez]

+1!

A workaround for this would just be destroying and re-initializing on a throttled window resize but please add this soon!

[AndyWilson82]

+1

[Arbust908]

+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

[brentkelly]

+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.

[matt-bailey]

Another +1 - Started commenting on https://github.com/glidejs/glide/issues/208, but realise this is basically the same feature request.

[sl-pascalgeay]

Another +1

[mediabeastnz]

1+ ;)

[Essk]

+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 :)

[Badyanchik]

+1

[evzaro]

+1

[martinsnajdr]

+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.

[propagandaCreative]

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.

[Jan10]

+1

[TomDeSmet]

+1

[marisaroque]

+1

[philip-keep]

+1, will switch over to use this, if implemented.

[davygxyz]

+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()
    }
}`

[maxhartshorn]

+1 this feature would be super useful

[fv-enrico]

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!

[the94air]

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

[danimalweb]

Another vote for this feature! I was looking to replace Flickity with this.

[nataliawww]

+1, regret using the slider now that I know this feature isn't supported..

[riderodd]

+1, need it everytime

[alexcapes]

+1 need this for a new project to stack columns on mobile + disable glide

[cbrophy78]

I am looking for the reverse of this, on larger screens destroy the glide. On smaller screens mount it.

[sjirel]

Ah bummer, I use this feature in almost all of my projects. Would really appreciate if this came out of the box. +1

[mkurdziel88]

+1

[batr94]

+1

[gabrielzevedo]

+1

[Jay-Plumb]

+1

[jennicar]

+1

[gabrielbrise]

+1

[nitrokevin]

Please can this be added it would be very useful

[juranosaurustechs]

+1

[JessicaStrachan]

+1

[loudless]

+1

[pedrokuper]

+1

[ghost]

+1

[dorianfilippi]

Simply with a bit of CSS

@media screen and (min-width: BREAKPOINT1) and (max-width: BREAKPOINT2) { .glide__slides { transform : initial !important; } }

Kisses

[cihangir-mercan]

Simply with a bit of CSS

@media screen and (min-width: BREAKPOINT1) and (max-width: BREAKPOINT2) { .glide__slides { transform : initial !important; } }

Kisses

brilliant. need more upvotes.

I advise transform: none !important; for ie11 by the way.

[cesarkohl]

Follows below a JS solution.

const slider = '.slider';
const BREAKPOINTS = { phone: 768 };

initSlider() {
    let glideInit = false;
    const options = {
        type: 'carousel',
        perView: 3,
        peek: 30
    };

    // Starts if mobile
    let glide = new Glide( slider, options );
    if ( document.body.clientWidth < BREAKPOINTS.phone ) {
        glide.mount();
        glideInit = true;
    }

    // On resize, if phone mount else destroy
    window.addEventListener( 'resize', () => {
        if ( document.body.clientWidth < BREAKPOINTS.phone ) {
            if ( glideInit === false ) {
                glide = new Glide( slider, options );
                glide.mount();
                glideInit = true;
            }
        } else {
            if ( glideInit === true ) {
                glide.destroy();
                glideInit = false;
            }
        }
    });
}
initSlider();

[GuitarKat]

I did something kinda hacky but so far it seems to work :)

var windowSize = window.innerWidth;
    if (windowSize > 991) {
        glide.disable();
    } else {
        glide.enable();
    }

    function resizeFunction() {
        var windowSize = window.innerWidth;
        if (windowSize > 991) {
            glide.disable();
        } else {
            glide.enable();
        }
    };

    window.addEventListener("resize", resizeFunction);

Works on IE11, IE Edge, Chrome and Firefox

[cihangir-mercan]

I did something kinda hacky but so far it seems to work :)

var windowSize = window.innerWidth;
    if (windowSize > 991) {
        glide.disable();
    } else {
        glide.enable();
    }

    function resizeFunction() {
        var windowSize = window.innerWidth;
        if (windowSize > 991) {
            glide.disable();
        } else {
            glide.enable();
        }
    };

    window.addEventListener("resize", resizeFunction);

Works on IE11, IE Edge, Chrome and Firefox

I advise you to add 500ms debouncer to the resize listener function.

[aliciaj]

+1