glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
https://glidejs.com
MIT License
7.3k stars 772 forks source link

Using .update() with breakpoints breaks options #419

Open kculmback opened 5 years ago

kculmback commented 5 years ago

Same issue as #244, but I am experiencing this using version 3.4.1.

Settings:

{
  perView: 3,
  breakpoints: {
    900: {
      perView: 2,
    },
  },
},

Calling update whenever intersection observer changes (this.instance refers to glide):

this.instance.update({
  keyboard: entries[0].isIntersecting,
})

When this gets called, perView no longer gets updated when changing screen resolution.

kculmback commented 5 years ago

Side note: I have also tried calling update with the original settings without luck:

this.instance.update({
  ...this.options,
  keyboard: entries[0].isIntersecting,
})
sod commented 4 years ago

The issue is this line https://github.com/glidejs/glide/blob/master/src/components/breakpoints.js#L88

The Breakpoints extension pulls in the settings object reference once and works with that on resize. So the resize listener just overwrites everything with the initial values.

this: Glide.settings = mergeOptions(settings, Breakpoints.match(points)) has to be changed to: Glide.settings = mergeOptions(Glide.settings, Breakpoints.match(points))

or pull in the new reference in Events.on('update', () => { ... but better would be to just always access Glide.settings directly.

I'd open a PR, but my last bugfix PR (https://github.com/glidejs/glide/pull/379) is in limbo for 4 months, so I'm not sure about that.

rhysstubbs commented 2 years ago

For anyone experiencing this issue, a simple solution could be to destroy the glide instance, updates the settings and re-instantiate glide so that the settings up picked up. This is obvously not ideal and does not aim to fix the issue but will get you going...