Slides not 100% Width

[idesigns-studio]

Hello! This topic has kind of been answered here (#71), but since i don't really know javascript, i didn't understand exactly how and where to put the .reinit() code.

Here is where i am having the issue: http://helenaswax.com/2015/

As you can see, the slides are stacking to the left, but as soon as you change the browser window size, it adjusts perfectly. Could you help me with that?

Thanks in advance!

[jedrzejchalubek]

It looks like you managed it by yourself. For future, probably script run before necessary DOM was ready, so wrong width calculation was performed.

[idesigns-studio]

Hello, actually, i cheated, i used an iframe :(. I didn't get it to work directly on the page. And for your suggestion, like I said, i don't know javascript, so i really don't know what that means.

[dokicro]

Hi,

I had the same problem and my janky solution vas:

setTimeout(() => {
  new Glide('.glide').mount();
}, 1);

[phpMagpie]

I'm having this same problem where the slides are being created with a width which should be 100%, but is 30px out which throws the slides way out. As soon as I resize the window the issue resolves itself.

Any pointers as to how I can get glide to load correctly in the first place or trigger a resize event so it sorts itself?

[MailboxArsonist]

I'm also having the same problem, is there an actual solution other than a timeout?

[MailboxArsonist]

@andershagbard, thanks for the reply. I'm using it in a React application, so it's getting mounted in the componentDidMount method, the DOM has already loaded so I'm a little confused as to why its not working, works fine with a settimeout so maybe I'll just use this solution!

[andershagbard]

I actually ran info this issue myself. Thought my previous eventListener would fix it, but it didn't.

This code seems to make it consistent. Initially on page load, it will show the slider with the incorrect fix, but it will fix it when readyState is complete.

const api = new Glide(carousel, settings).mount();

if (document.readyState !== 'complete') {
  document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete') {
      api.update();
    }
  });
}

[fromaline]

My really quick and dirty fix. Works pretty well for me.

new Glide('.glide').mount()
document.querySelector('body').style.width = '99vw'
document.querySelector('body').style.width = '100vw'

[Keither]

I'm also having the same problem, i use for my light box image
i use time out 1 not working, i fixed 500 working fine
setTimeout(() => {
new Glide('#modalLightBox .glide', { type: 'carousel' }).mount();
}, 500);
sorry my Englisht not good!

[johannesmutter]

I had this issue, too when the slide is inside a css flex column, which is again inside a grid area. To fix it I had to set

.glide {
    max-width: 100%;
}

for the wrapper element

[Enigama]

@johannesmutter Thanks, your solution save my life))))

[claborier]

+1 I have the same issue with a slider where each slide contains one big image larger than the slider container (but displayed with object-fit: cover)

With a slider that make 100% width of the screen, everything is fine.
However the issue occurs with a slider less wide than the screen... slides are displayed larger than the slider container.

Resizing the windows put things in order.

The setTimeout solution is working and will use it as a fix.

[ultrono]

Hi,

I had the same problem and my janky solution vas:

setTimeout(() => {
  new Glide('.glide').mount();
}, 1);

It's now 2023 and I'm genuinely disappointed that worked 😄