glide: Disable/Enable glide based on breakpoint

Simply with a bit of CSS

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

Kisses

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

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

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!

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

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

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.

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.

Where is the functinality? I can’t seem to find this in the documentation. This post has been made over 3years ago. Come on!

How much money do you want? Surely we all can give you £10 to implement this, or how much?

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();

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

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