Settings aren't working correctly for breakpoints

[ghost]

First of all I want to say that I am very happy with Glide.js! I noticed a bug (I think) though when it comes to defining breakpoints.

const glide = new Glide('.glide', {
  type: 'slider',
  perView: 3,
  bound: true,
  gap: 10,
  dragThreshold: false,
  breakpoints: {
    1024: {
      startAt: 0,
      perView: 2,
      dragThreshold: 120,
    },
    600: {
      startAt: 0,
      perView: 1,
      dragThreshold: 120,
    }
  },
});
glide.mount();

I have a slider with 3 items, which I want to show next to each other. The dragThreshold is set to false, so that it is not possible to navigate. But when the screen is getting smaller I want the enable the dragThreshold (when it fires the breakpoint). But this doesn't work, as you can see in my pen: https://codepen.io/jfrdfr/pen/QXwNNj

I also noticed that the 'startAt' option is not working for breakpoints. When I am navigating the elements on a smaller device (for example when perView is set to 1), but when it hits another breakpoint it doesn't reset the slide back to the 0 index.

I hope you could help me out with this! Maybe I am using it wrong (or expecting wrong results).

[elijahworkz]

I have noticed the same issue. Breakpoint for tablet (768) wasn't working, the only way I got it to change for that resolution is to set breakpoint much higher (991) But it's not usable for more precise resolution targeting

[gautamz07]

@jfrdfr are you trying to disable the slider on desktop but then enable it on mobile devices ?

Also your understanding of startAt is mistaken i believe as when a breakpoint is hit , the plugin will not reset the index.

maybe a similar issue to #213 ?

Also what devices are you testing this on ?

[dana-c0914]

I have the same issue. Breakpoints below 980 don't seem to be taken into account. I am using 3.4.1 version.

Update on this is actually working, but not using the dev tools open, since it uses the window object to check if a certain media query matches or not. If you truly resize the window, the breakpoints are applied.

[ghost]

Sorry for the late reply, I have tried the latest version (3.4.1) and sadly it doesn't work as I expect it to. I'm currently using Firefox 77.0.1 on Windows. I've made a new pen to showcase my issue: https://codepen.io/Afgedankt/pen/vYLgKgP

dragThreshold: The slider I was using had three slides. On desktop I wanted to disable the threshold, so that the visitor can't move the slides (in a way that is disabling the slider). When resizing the browser it will eventually show two slides, but sadly the threshold is still disabled, even though I specified it in the breakpoint. This also happens the other way around: when the two slides are visible (threshold is then enabled) and resize it until I see three slides again, the threshold isn't disabled.

startAt Almost the same behaviour exists for this option. I'm expecting that when I hit a new breakpoint the slider resets back to the first slide.

Again, maybe I'm using this wrong. It does look like when a breakpoint is hit not all the options are processed in the slider.

Hope I made myself more clear! Anyway, still enjoying the plugin :) Hope this issue will get fixed, so that I can use it for more projects!

[VeeDoubleYuh]

Hey guys, sorry to bump. But I was having this issue and solved it for myself, so you (or any future readers) may have overlooked the same thing I did.

At the very bottom of this page, the docs remind you to pull in all modules that you need -- not just Glide. So I had forgotten both , { Breakpoints } in my import and { Breakpoints } in the mount() call at the end.

[cihangir-mercan]

Hey guys, sorry to bump. But I was having this issue and solved it for myself, so you (or any future readers) may have overlooked the same thing I did.

At the very bottom of this page, the docs remind you to pull in all modules that you need -- not just Glide. So I had forgotten both , { Breakpoints } in my import and { Breakpoints } in the mount() call at the end.

sorry. that does not work.

[bekahmcdonald]

I'm encountering the same issue, and have managed to solve it by ignoring the breakpoints property, and passing functions / ternary statements to my settings instead. Sharing in case it helps someone.

In my code, the variable isMobile returns a Boolean (I'm using a matchMedia query for this), and the variableslideCount returns the number of slides in the carousel.

const glide = new Glide(carousel, {
      type: 'slider',
      startAt: isMobile ? 0 : 1,
      perView: slideCount > 2 ? 2.25 : 1,
      gap: 92,
});

NB – if you're not using the modular build of Glide, then VeeDoubleYuh's solution won't fix your problem.