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

[AurelianSpodarec]

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?

[vaishnavi-s2901]

+1

[uzair-clyck]

Yeah please do that and also see if we can change different options on perpage, type etc on the basis of screen width.

[roeeyossef]

+1

[ericmorand]

Just disable the plugin and enable it based on whatever condition fits your need. This is a simple as that.

Glide can't take into consideration all the use cases that could emerge. Some people may want to disable the slider based on viewport size, others based on browser features, others based on accessibility settings, others on a mix of all these or some other conditions that I did not think about. This is not feasible.

If you want to remove the slider, just remove it and add it accord to your need.

[AsciiSmoke]

I too have created a custom approach to this issue.

Essentially it's the same as others who're destroying and remounting but includes changing the css classes to stop the layout changes that come with the Glide css.

My approach searches the element for any glide classes and renames them to 'xglide'. Unfortunately, this comes with the caveat that the glide classes have to be the first class in the class list of the affected elements (e.g. 'class="glide row etc"' and not 'class="row etc glide"').

Hope it helps and saves someone the time to create themselves.

import "../../../../node_modules/@glidejs/glide/src/assets/sass/glide.core";
import "../../../../node_modules/@glidejs/glide/src/assets/sass/glide.theme";

import Glide from '@glidejs/glide';

let carouselContainer = document.getElementById("glide-carousel");
let carouselGlideSelector = carouselContainer.querySelector(".xglide");
let carouselGlideIsMounted = false;
let glideWindowWidthEnabledBreakpoint = 991;

window.glideOn = function (selecter, options) {
    if (!carouselGlideIsMounted) {
        toggleGlideClasses(true);
        window.glideCarousel = new Glide(carouselGlideSelector).mount();
        carouselGlideIsMounted = true;
    }
}

window.glideOff = function (selecter, options) {
    if (carouselGlideIsMounted) {
        toggleGlideClasses(false);
        glideCarousel.destroy();
        carouselGlideIsMounted = false;
    }
}

function toggleGlideClasses(enable) {
    let selector = (enable) ? "xglide" : "glide";
    carouselContainer.querySelectorAll("[class*= '" + selector + "']").forEach(el => {
        el.classList.forEach(cl => {
            if (cl.startsWith(selector)) {
                let newClass = (enable) ? cl.substring(1, cl.length) : cl.replace(cl, "x" + cl);
                el.classList.replace(cl, newClass);
            }
        });
    });
}

function toggleGlideBasedOnWindowWidth() {
    (window.innerWidth > glideWindowWidthEnabledBreakpoint) ? glideOff() : glideOn();
}

window.addEventListener("resize", ev => {
    toggleGlideBasedOnWindowWidth();
});

toggleGlideBasedOnWindowWidth();