Glide: Breakpoints apply to all sliders, not just the one specified

[mattisherwood]

the breakpoint rules are applied to all sliders on the page, not just the one it's a part of.
e.g. glide1 should show 3 on desktop and 1 on mobile whilst glide2 should show 6 on desktop and 2 on mobile. However, on mobile they both show 2.

new Glide('#glide1', {
    type: 'carousel',
    perView: 3,
    breakpoints: {
        800: {
            perView: 1
        }
    }
}).mount();
new Glide('#glide2', {
    type: 'carousel',
    perView: 6,
    breakpoints: {
        800: {
            perView: 2
        }
    }
}).mount();

PS - I'm using Glide 3.0

[TFOH]

This seems similar to something i've been experiencing, in that the last declared rule is applied to all sliders. However, I noticed this whilst using the peek option. In the example below both sliders will have a peek of 30px each side

new Glide('#glide1', {
    type: 'carousel',
    perView: 1,
    peek: {
        before: 0,
        after: 0
        }
    }
}).mount();
new Glide('#glide2', {
    type: 'carousel',
    perView: 2,
    peek: {
        before: 30,
        after: 30
        }
    }
}).mount();

Glide 3.0.1 here. Sorry to muddy the waters if you feel this is unrelated, I just saw some similarities in our issues.

[mattisherwood]

Possibly. If you load the page at less than 800px wide, then it works fine _until you resize the browser_. It could either be because those calculations are made after the resizing and therefore after the rest of the rules, or that they are just applied incorrectly (indiscriminately on all sliders).

I did try rearranging the rules so that 'type: carousel' was listed last, but the same happened. The key seems to be how breakpoints are applied on resize. (Or maybe how all inset objects are applied, if yours is the same issue).

[TFOH]

So on first page load when the viewport is below 800px the first slider shows 1 per view, and the second slider 2 per view, but then they both display 2 per view when you resize above 800px and then back to below 800px? Is that correct?

[jedrzejchalubek]

I've done some research and it looks like recent 3.0.1 fix introduced this problem :(

Can someone try downgrade to version 3.0.0 and let me know if I'm right?

[TFOH]

I downgraded to 3.0.0 and that seems to have fixed the issue I was experiencing with the peek option.

[TFOH]

I tested with the OP's code on 3.0.0 and that seems to work as well now in my codepen here

[jedrzejchalubek]

Should be fixed with v3.0.2 release

[TFOH]

It's working in my updated codepens

[mattisherwood]

Ah thanks, the bug is fixed if I use glide.js (v3.0.2) on my dev site.
The minified version breaks the sliders though with an Uncaught TypeError: "this.root.querySelector is not a function" at "Object.mount".
I'm aware that possibly could be an install issue though. Do your minified versions work ok?

[jedrzejchalubek]

Oh, @mattisherwood you are right. Uglify has broke minified version, need to investigate that.

[mattisherwood]

Also, I'm getting issues in Internet Explorer (v11.371.16299.0) now where the sliders just refuse to work.

[mattisherwood]

ie's debugger says "SCRIPT438: Object doesn't support property or method 'from'" and points to:

      this.slides = Array.from(this.wrapper.children).filter(function (slide) {
        return !slide.classList.contains(Glide.settings.classes.cloneSlide);
      });

[TFOH]

@mattisherwood Array.from is not supported in IE, I haven't tested it yet but you can try this polyfill from MDN

[jedrzejchalubek]

@mattisherwood Thanks for detailed bug reports 👍. Addressed this issues with v3.0.3 release.

Ah thanks, the bug is fixed if I use glide.js (v3.0.2) on my dev site.
The minified version breaks the sliders though with an Uncaught TypeError: "this.root.querySelector is not a function" at "Object.mount".
I'm aware that possibly could be an install issue though. Do your minified versions work ok?

Minified file for v3.0.3 should be working now. The configuration of the uglify in lib build script was striping too much and breaking.

ie's debugger says "SCRIPT438: Object doesn't support property or method 'from'" and points to:

I've swapped Array.from to Array.prototype.slice.call so, now, glidejs should be compatible with IE11. Please, let me know if you test it out :)

PS. I'm closing this issue for now. If you find any other problems feel free to open new topic :)